- This topic has 5 replies, 2 voices, and was last updated 4 years, 10 months ago by
.
Hello. In Theme Settings–>Header–>Top Bar Settings, I have my top bar enabled. But my site does not display my top bar (site here). Any ideas why this is occurring, and how I can resolve it? If it helps, in Theme Settings–>Header–>Header Template I have “Header 1” selected.
Also, in Theme Theme Settings–>Header–>Header Template, there are many different options (e.g. Header 1, Header 2, etc). How can I see an example of each option before I actually make a choice?
Thanks.
Hi @cagross,
I hope you are well today and thank you for your question.
The top bar only displays for the Header 2 and Header 3 Header Templates.
You can see the difference between different header layout on the following pages.
https://jevelin.shufflehound.com/header/first-header/
https://jevelin.shufflehound.com/header/second-header/
https://jevelin.shufflehound.com/header/third-header/
https://jevelin.shufflehound.com/header/fourth-header/
https://jevelin.shufflehound.com/header/fifth-header/
https://jevelin.shufflehound.com/header/sixth-header/
https://jevelin.shufflehound.com/header/seventh-header/
https://jevelin.shufflehound.com/header/eighth-header/
https://jevelin.shufflehound.com/header/ninth-heade/
Best regards,
Shufflehound team>> The top bar only displays for the Header 2 and Header 3 Header Templates.
OK thanks for that. In a previous support post, I saw that the top bar should display for Header 1, 2, and 3. But I guess that has changed.
If I want to display a phone number in the header, but *not* in a top bar–using Header 1 for example. What would be the best approach? Would I have to make child theme modifications to one (or more) theme templates (e.g. header.php), and combine that with custom CSS edits? Or is there an easier/more advantageous method that I’m overlooking?
I’ve seen the links for each header type–thanks. But what about examples for:
Header 10
Left Header 11
Left Header 12If I want to display a phone number in the header, but *not* in a top bar–using Header 1 for example. What would be the best approach? Would I have to make child theme modifications to one (or more) theme templates (e.g. header.php), and combine that with custom CSS edits? Or is there an easier/more advantageous method that I’m overlooking?
We can’t achieve this just developing CSS code.
To achieve this, you have to develop custom code in the child theme of Jevelin theme.
Developing custom code for custom functionality is beyond the scope of support that we provide here. Please see https://themeforest.net/item/jevelin-multipurpose-premium-responsive-wordpress-theme/14728833/support
If you are not a developer then you can consider hiring a developer to develop it for you. You can hire a developer from any freelance site. Shufflehound recommends the developer https://www.upwork.com/freelancers/~011652ffec8865c6d5
I’ve seen the links for each header type–thanks. But what about examples for:
Header 10
Left Header 11
Left Header 12Currently, we don’t have demos of them but you can test them yourself on your site.
OK right, I understand that custom edits like that are beyond the scope of this support. But let me return to options that *are* available to me. Specifically:
1. I see that the top bar is always hidden at mobile screen widths. Is that correct, or am I overlooking something?
2. What I want in this case is to display my phone number in the header, and have it be visible at all screen widths. If the top bar is *always* hidden on mobile, what options might I have to display my phone number in the header at all screen widths?
Thanks.
Solution for this topic
I see that the top bar is always hidden at mobile screen widths. Is that correct, or am I overlooking something?
Yes, it is correct and this is by design.
2. What I want in this case is to display my phone number in the header, and have it be visible at all screen widths. If the top bar is *always* hidden on mobile, what options might I have to display my phone number in the header at all screen widths?
You can display the number on mobile by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
@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; } }
