Adding site title to navigation and navigation as a Header

Hi Carsten,

Site title in navigation is still on our list. It's not commonly requested so it's a bit low on priority.
Most people would use a logo with that type of layout.

As for the 2 issues regarding navigation as a header, any chance you can link me to the site in question?

You can edit the original topic and use the private URL field.

Thanks!

Hi Leo, as you can see from the screen dump, the center of the logo is not the center of the letters, the letters stands on the center line.

https://imgur.com/a/Pwm2DKm

I know that the 'menu item hight' is not ment for enlarging the logo alone but the whole navigation bar, but it would be nice to have an option for adjusting the logo size as predicting the right logo size for the header, can be a very tiresome process.

Regards
Carsten

Regards
Carsten

Really hard to tell without seeing the live site still.

You can see the method used here and it's completely centered: https://gpsites.co/marketer/

If you want this much top and bottom padding with a thin logo like this, it might be best to avoid using the navigation as header method, and just float the navigation right and add the logo through site identity:
https://docs.generatepress.com/article/navigation-location/
https://docs.generatepress.com/article/adding-header-logo/

Then we can tweak the location with some CSS.

Let me know if this helps :)

Here you can see that the letters stands on the center line:

https://imgur.com/a/rxRxRlX

By decreasing the menu item hight, it is also easy to se that the menu is not centered in the navigation bar:

https://imgur.com/a/qG6fehN

f you want this much top and bottom padding with a thin logo like this

no, on the contrary, I want as little padding to my navigation bar as possible, thats is why I would like to see an option for resizing the logo by it self.

Regards
Carsten

By default the menu items are at the center of the navigation bar, like it is demonstrated here:
https://gpsites.co/marketer/

I need to inspect the code to see why yours aren't working.

Any chance you can link me to the site?

If you want a bigger logo while keeping the menu items small in height, you will likely need the normal header method I suggested above (navigation float right + logo in site identity)

If you want a bigger logo while keeping the menu items small in height, you will likely need the normal header method I suggested above (navigation float right + logo in site identity)

Hi, this suggestion leads to even more deviation from the center line, as the hight from the logo decides the header hight, which is higer than the navigation hight. And when the axis is not centered this looks even more odd. And what about the color?. How do I make them the same color done the right way? Setting the color for the header, and make the navigation bar transparent?

https://imgur.com/a/VMeSQDM

I figured it out, I can adjust the Menu Item Height of the navigation bar to fit the header hight, but is this the way to do it?

https://imgur.com/a/5xsZvdu

Just to make sure we are on the same page, you are wanting the menu item height to be smaller than the logo height right? That's the only reason you would use this method.

If so then you will need to use this CSS to move the navigation down:

@media (min-width: 769px) {
    .main-navigation {
        padding-top: 10px;
    }
}

Just fine tune the px number.

As for color, just set the header color to what you want, then use the same or transparent (doesn't really matter) for the navigation.

It would be much easier if you can link me to your site if you have further questions.

To answer this: https://generatepress.com/forums/topic/adding-site-title-to-navigation-and-navigation-as-a-header/#post-736829

Yes that would be the way. However, if you want the menu item height to be exactly the same as logo height, then the using navigation as a header method should work. We have lots of users using that method without any problems so once again I'll need to see your site to tell why it isn't working for you.

Hope this is clear.

Thanks for the clarification, I will go through my css to se if something is causing this line issue, otherwise I will get back to you with access to my site.

Sounds good. Just let me know :)

Hi Leo, using the navigation in header with the 'Float right' option, returns this result on an iPad

https://imgur.com/a/9LQbaqV

I really would like the option of having a mobile burger menu on desktop as well, is it possible?

Regards
Carsten

You will need to increase the mobile menu breakpoint so it turns into toggle before breaking into the second line.

I assume you are using mobile header? If so try this:
https://gist.github.com/generatepress/c23aef2d05807c39bb32

What do you mean by toggle on desktop? You can activate slideout navigation on desktop as well:
https://docs.generatepress.com/article/activating-slide-out-navigation/

Let me know :)

If you don't want to use the toggle on tablet, you can also use the newly added navigation drop point option:
https://generatepress.com/generatepress-2-2/