[Resolved] Controlling menu margins

[NBC]

I’ve looked through the files for GP/GP Premium and through the forums, but can’t find an answer to this question.

How do I control the left margin applied to the main menu? My logo, tagline, and content all fall farther to the right than the first item of menu text. I want them all to follow the same left margin.

Thanks for the assistance!

[Leo]

Hi there,

Try the CSS below and adjust the px number as needed:

.main-navigation {
    margin-left: 40px;
}

Adding CSS: https://generatepress.com/knowledgebase/adding-css/

If this doesn’t work can you provide a link to your site?

[NBC]

Thanks for the code. I loaded it through Tom’s Simple CSS plugin.

Unfortunately, that setting shortens the menu bar rather than simply increasing the left margin of the type. All I want to do is move the type for the menu items so the leftmost lines up with the logo, tagline, images, and body copy. The menu bar should stay the full screen width.

I’m developing this redesign under localhost, so I can’t provide a link. Sorry!

[Leo]

so currently you have
Header Alignment > Left,
Navigation Position > Below Header
Navigation Alignment > Left,
and everything is not aligned to the left? Any chance of a screen shot?

[Leo]

actually give this CSS a shot:

.main-navigation .main-nav ul .current-menu-item:first-child > a {
	margin-left: 40px;
}

let me know if this is what you are after 🙂

[Tom]

If the above doesn’t do it, a screenshot of the area would definitely help 🙂

[NBC]

I was hoping to avoid the hassle of finding somewhere to upload an image file, but here it is.

From left to right, this image shows the default behavior of the menu, the effects of the first piece of code, the effects of the second piece of code, and the desired appearance of the menu.

Everything is left aligned, with navigation below header. I have blurred out some details that I need to keep private at this time.

[Tom]

I think the only way to achieve what you’re looking to do is this CSS:

.main-navigation .main-nav > ul > li:first-child > a {
    padding-left: 40px;
}

However, wouldn’t it be easier to just remove the left padding from the header?

[NBC]

Tom, that’s it! Perfect! Thank you ever so much!

And to answer your question: It’s not just the header that has that 40-pixel padding. The same padding/left margin appears on the post content as well. Without the code you gave me, the menu’s the only thing that doesn’t start 40 pixels from the edge of the screen.

[Tom]

Awesome, glad I could help 🙂

[Author]

Posts