[Resolved] Putting logo/signup in Navigation bar

[Jana]

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

[Leo]

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?

[Jana]

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/

[Leo]

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/

[Jana]

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?

[Leo]

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/

[Jana]

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?

[Leo]

I don’t see the nav-botton class being added to any of the menu items.

Can you double check?

Let me know 🙂

[Jana]

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

[Jana]

Whoa! I got it to work! Thanks for yoru patience! Love your theme and your customer support!

[Leo]

Glad to hear 🙂

[Author]

Posts