[Resolved] Controlling menu margins

Home Forums Support Controlling menu margins

This topic contains 9 replies, has 3 voices, and was last updated by  Tom 3 years, 6 months ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • #213967


    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 Customer Support

    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?



    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 Customer Support

    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 Customer Support

    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 Lead Developer

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



    I was hoping to avoid the hassle of finding somewhere to upload an image file, but here it is.
    Original menu appearance, effects of code samples, desired result

    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 Lead Developer

    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?



    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 Lead Developer

    Awesome, glad I could help 🙂

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.