Archived topic
Putting logo/signup in Navigation bar
10 replies · Started by Jana on June 24, 2019
I have to replicate this navigation bar with the logo and the signup included in it. I've tried several things from your help sections but haven't gotten anywhere.
Thanks, Jana
Hi there,
Have you tried this?
https://docs.generatepress.com/article/adding-buttons-navigation/
Can you link me to your current site so I can see the progress?
Hi - I added the your-custom-class in the home menu but I don't know where to add the css (I tried putting it into custom css but that didn't work.
And I also don't' know how to personalize the code or how to add a logo to the nav bar.
This is the site - https://centerforahumaneeconomy.org/testsite/
Try adding a logo in Site Identity:
https://docs.generatepress.com/article/adding-header-logo/
Then use this method:
https://docs.generatepress.com/article/navigation-as-a-header/
As for buttons in navigation, can you follow every step in this article first?
https://docs.generatepress.com/article/adding-buttons-navigation/
I tried adding the logo to the site identity but couldn't get it to be up on left side of nav bar without moving the Site title as well. And when I turned it off and put the site title in Elements instead, I couldn't get it centered - maybe you can send me the code to center it in elements?
As far as following the steps for the nav button - I don't understand where to put the CSS code - it's not clear to me. Could you explain that part?
So just to make sure, you are wanting logo as well as site title in the navigation?
It usually works much better if it's just the logo as you've shown in the example.
Positioning the header element content can be done within the settings:
https://docs.generatepress.com/article/how-to-create-a-page-hero/#step-5-position-the-content
CSS can be added using one of these methods:
https://docs.generatepress.com/article/adding-css/
Just to deal with the nav button issue right now - I have this in my Customize > Additional css:
@media (min-width:769px) {
.main-navigation .main-nav ul li.nav-button a {
background-color: #ffffff;
border: 2px solid #000000;
color: #000000;
line-height: 80px;
}
}
But it isn't adding a button in the nav bar - what am I doing wrong?
I don't see the nav-botton class being added to any of the menu items.
Can you double check?
Let me know :)
I tried following the instructions and just can't make it work!
I've added "nav-botton" to the CSS Classes of a separate menu item (Donate) and it did nothing.
And I've got this in the additional css:
@media (min-width:769px) {
.main-navigation .main-nav ul li.nav-button a {
background-color: #ffffff;
border: 2px solid #000000;
color: #000000;
line-height: 35px; /*this number will likely need to be adjusted*/
}
}
Thanks, Jana
Whoa! I got it to work! Thanks for yoru patience! Love your theme and your customer support!
Glad to hear :)