Archived topic
Primary and Secondary Nav on Same Horizontal
5 replies · Started by Brian on September 15, 2017
Hello,
I have two questions:
1) Is there a way to get the primary and secondary navigation on the same horizontal level?
2) If I use an image as a menu item for my logo, can I adjust the size of this image, or will it be the same size as my menu items?
Here's an example:
https://evernote.com/
Similar to this site, my goal is to have the primary nav next to the logo, and a smaller secondary nav floated to the right of the header.
Thank you!
Hi Brian,
You actually don't need two menus for that. The navigation can be achieved with the combination of these two methods:
https://docs.generatepress.com/article/navigation-logo/#navigation-as-header
https://docs.generatepress.com/article/adding-icons-to-menu-items/#floating-the-icon-to-the-right
Then the logo size would be determined by menu item height:
https://docs.generatepress.com/article/menu-item-height-width/
Let me know if you get stuck :)
Thanks Leo! Got it figured out.
Follow up:
I am looking to add a border or background highlighting around certain menu items. I am able to add a border based on some of your other support threads, but the border is the same height as the entire menu and is too large. Basically, I would like to be able to customize the padding of the border or background color around the menu item text.
Similar to the border/background of the Sign Up button on this site: https://www.mint.com/how-mint-works#toc
Thanks for all your help!
Just making sure you are using the CSS in this article?
https://docs.generatepress.com/article/adding-buttons-navigation/
If so you can also try adding another style:
line-height: 20px;
If this doesn't work can you link me to the page?
Thanks Leo - playing around with the line-height is what helped me figure it out. Here's the css I ended up with in case anyone else is trying to accomplish the same thing:
Colored Nav Button:
@media (min-width:769px) {
.main-navigation .main-nav ul li.nav-button a {
border: solid #ffffff;
color: #ffffff;
line-height: 3;
margin-top: 15px;
margin-right: 10px;
}
}
Colored Nav Button - Change on Mouse Hover:
.main-navigation .main-nav ul li.nav-button-hover > a:hover,
.main-navigation .main-nav ul li.nav-button-hover.sfHover > a {
border: solid #1e73be;
color: #ffffff;
}
Awesome. Thanks for sharing!
