I am very much a beginner here and can’t seem to figure out how to add a second menu or navigation bar to my header! I currently have one but need a second (and not in the footer). https://lunchwithleah.com
I’ve added a widget area to my header and added specifially the widget for navigation menu) but it doesn’t show up!
Hi there,
Are you referring to the widgets that you added to the Header widget areas in the widgets are in the admin area?
If so, you will have to enable the Widgetbar setting in X > Theme Options > Header > Widgetbar and set the number of widgets that you want to be displayed on the site.
Once you have enabled that option, you should see the + icon on the top right part of the page just like what you can find here: http://demo.theme.co/integrity-1/
Hope this helps.
Hi Jade,
OK, that info helped me realize that my Hello Bar was covering the icon you are referring too.
However, I want to be able to create two horizontal menu bars (similar to what you see in this website: https://www.kitchenstewardship.com/
Can I do that?
Hi again,
In X you can use Topbar to add a second menu. First you’ll need to enable the Topbar via Theme Options > Header > MISCELLANEOUS > Topbar and then in the TOPBAR CONTENT add the following code:
<a href="#holder">HOURS</a> | <a href="#holder">DIRECTIONS</a> | <a href="#holder">CONTACT</a>
This will add a simple menu in your Topbar, you can then style it with custom CSS if needed.
Hope this helps!
Thanks! I will give that a go!
I’m assuming that when people click on these header options it will take them to a page with that title? (sorry, I really know nothing about css!) So if I have a page titled “About” and I put “About” in the holder place (#about) then it will link to my About page?
And how can I style the font and color and hover colors? Could you give me some basic code to change?
Hi There,
It should be the URL of your about page. Something likes this:
<a href="http://www.yourwebsite.com/hours/">HOURS</a> | <a href="http://www.yourwebsite.com/directions/">DIRECTIONS</a> | <a href="http://www.yourwebsite.com/contact/">CONTACT</a>
Please try adding this custom CSS under Theme Options > CSS:
.x-topbar .p-info a {
color: #f00;
font-size: 18px;
}
.x-topbar .p-info a:hover {
color: #421515;
}
If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.
I recommend you to watch following video that will help you to get started with CSS.
Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.
https://developers.google.com/web/tools/chrome-devtools/css/
Cheers!
WOW! That info will get me off to a great start!
Thank you, that was really helpful!
Glad we could help.
Cheers!
I have another question regarding the top bar.
It looks great in desktop view: https://lunchwithleah.com
However, in mobile view, my top bar is partially covered by the notification bar at the top. Is there a way to “push down” the top bar in mobile view so you can see everything well?
I do not want to get rid of the notification bar.
Thank you!
Hi @leahvachani,
You’ll need this CSS too since the notification changes height but the padding remains 50px. It’s notification plugin issue, I recommend contacting them for further issues.
@media ( max-width: 767px ) {
body.has-mtsnb {
padding-top: 95px !important;
}
}
Thanks!
Great, and do I put this in GLOBAL CSS?
Hi again,
Yes you can add the above code in the Theme Options > CSS: or your can add it your child theme’s style.css file.
Hope this helps!
Ok, I added it to the Theme Options css but it did not change how I see the Top Bar menu on mobile. I deleted all cache as well.
Hi again,
That’s not working because you’ve added the above code inside another CSS code (see screenshot) which is incorrect.
Please remove the code from there and add it to top of Theme Options > CSS: instead. Don’t forget to clear add caches after adding the code.
Let us know how this goes!
Thanks for that. I fixed the location of the code. However, now I have some weird background showing up only on mobile between the notification bar and the top bar. I played around with changing the padding (95px all the way down to 0px) but it doesn’t seem to affect it.
Any suggestions?
Hi,
I tested the code and it works. I can see you have set it to zero, kindly set it back to 95px then clear your browser cache or check your site in Chrome incognito mode.
If it still doesn’t work, kindly provide us your wordpress admin login in Secure Note.
Thanks
I sent a secure note.
I still see that weird gap in mobile view (also in incognito tab)
Hi There,
I would like to check your website but the password is incorrect.
Could you please double check?
Thank you.
sorry about that! I rechecked and sent new secure note.
Hi,
To remove the gap, I went ahead and adjusted 95px; to 50px; then added another css forsmaller devices.
@media ( max-width: 767px ) {
body.has-mtsnb {
padding-top: 50px !important;
}
}
@media ( max-width: 480px ) {
body.has-mtsnb {
padding-top: 70px !important;
}
}
There was a syntax error in your css code, that is why the code didn’t work the first time. I have also fixed the syntax error by removing the exceess curly brackets.
Kindly check in your end.
Thanks