- This topic has 5 replies, 2 voices, and was last updated 4 years, 6 months ago by
.
Hi,
1.
Can you please tell me how to activate the top bar on a mobile view? I only want to show the phone number .
2.
Can you tell me in which file I can add a link to the phone number?
3.
Can you please tell me if it’s possible to add a different menu to the mobile version?
Hi @sleenie,
I hope you are well today and thank you for your questions.
1.
Can you please tell me how to activate the top bar on a mobile view? I only want to show the phone number .
You can enable it in the theme header settings as shown in the attached screenshots.
2.
Can you tell me in which file I can add a link to the phone number?
If you are talking about the header topbar phone number then you can make them clickable to have links by using the child theme solution shared in the following topic.
3.
Can you please tell me if it’s possible to add a different menu to the mobile version?
You can achieve it using any of the below plugin solutions.
https://wordpress.org/plugins/responsive-menu/
https://wordpress.org/plugins/wp-responsive-menu/
Best regards,
Shufflehound teamHi there,
Thank you for your reply.
1.
This only shows the top bar on a desktop version. I want to show it on mobile devices, and only the phone number. Can you tell me how to do that?
The other things are working, thanks!
You can display topbat on mobile by using the CSS solution shared in the below topic.
https://support.shufflehound.com/forums/topic/top-bar-does-not-display-2/#post-46534
Hi Shufflehound,
It’s showing now, but it’s showing beneath the menu. Can you tell me how to show it on above the menu, like the dekstop version?
Instead of the shared code, please use the below CSS code to display topbar at the top but it will always display at the top even when you scroll the site.
@media (max-width: 1025px){ #page-container header.primary-desktop .sh-header-top .header-contacts-details:first-child, #page-container header.primary-desktop { display: block!important; height: auto !important; } #page-container header.primary-desktop .sh-header-top .header-contacts-details, #page-container header.primary-desktop .sh-header-height { display: none !important; } } @media (max-width: 1025px){ #page-container header.primary-desktop .sh-header-top { position: fixed; top: 0; left: 0; width: 100%; } header.primary-mobile { margin-top: 65px; } }
