[Resolved] How to adjust the size of navigation as header

[Michelle]

I keep seeing header element tutorials that show how to create a header by merging a hero image and site header. This method provides a good amount of control over padding, etc. However, I don’t want a hero image. I just want the site header with a my site logo on the left and navigation to the right. I am achieving this currently by using the Customizer and checking “Use navigation as header” and then adding some CSS.

I now need to reduce the size of the overall header, as the one button I have to the right is falling to a line beneath the site logo on smaller mobile devices. Plus, I want to add a hamburger toggle in the header as well. I don’t know how to keep them on one line responsively. Often, the CSS I add isn’t responsive. More css or through some other method?

I am so looking forward to having this finished. I’ve been at it for weeks.

🙂

[Ying]

Plus, I want to add a hamburger toggle in the header as well

It should be there by default. Did you hide it using CSS?

Can you try turn on the mobile header at customizer > layout > header?

[Michelle]

Yes, mobile header is turned on at Customizer>Layout>Header

I do not have it turned off in CSS, or in Elements or Snippets.

Off Campus Panel is enabled in Customizer.

[Michelle]

Here is my login info (see below)

I see that I should clarify that the header that needs resized is the sticky on scroll for mobile.

[Ying]

The login doesn’t work, can you check?

And did you only turn on the slide-out navigation on the desktop? Can you set it to on so it shows on all devices?

[Michelle]

Yes, it’s “ON”

Here is the CSS I have right now:

.main-navigation .main-nav ul li.login-logout a {
  font-size:11px;
  padding: 8px;
  background-color: #b80000;
  color: #ffffff;
	border-radius: 5px;
  line-height: 8px;
	margin: 30px 0;
}

.login-logout {
  position: sticky;
  top: 0;
  left: 10px
}

/*Make login-logout button line up with site logo*/
nav .inside-navigation .site-logo {
    margin-bottom: 0;
}

.site-logo {
    width: 180px;
}

[Michelle]

I believe that the hamburger menu is there, but hidddn behind the login-logout button. This is a padding issue?

[Ying]

Can you make sure the login details are correct so I can take a look at the backend?

[Michelle]

Sure. Here…

[Michelle]

I can see the hamburger menu, but it is under the login/logout button. I just can’t seem to get the padding right to separate them, and after they are separated, I need to have them both fit responsively on the sticky menu. I hope it’s do-able.

[David]

Hi there,

in Customizer > Layout > Primary Navigation, set the Menu Item Width to a value to create space between the login item and the off canvas toggle.

For the height of the Nav Header, you can reduce the Menu Item height in the same panel.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Michelle]

I have both set to as low as they go. Menu item width for mobile is set to 0 and menu item height is 20… is there another setting I could try?

[David]

You need to increase the Menu Item Width to a positive value eg. 20px this will stop the overlap.

BUT I missed the following CSS you have on your site. So ignore the above. And see this:

.main-navigation .main-nav ul li.login-logout a {
    font-size: 11px;
    padding: 8px;
    background-color: #b80000;
    color: #ffffff;
    border-radius: 5px;
    line-height: 8px;
    margin: 30px 0;
}

The margin: 30px 0;

Change that to: margin: 10px 20px;

That will reduce the height and add some space between the menu button and toggle.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Michelle]

That helped a bit. I had to set it to

margin: 10px 10px

to keep the menu item from going to the next line.

I still do not see the hamburger menu. Also, the menu item is below the site logo on sticky menu.

[David]

Did you make some changes to the design ? As i do not see the menu button in the header anymore ?
Let me know what we need to do 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts