Black Friday Sale! Get up to $30 off GP Premium! Learn more ➝

[Resolved] Controlling menu margins

Home Forums Support [Resolved] Controlling menu margins

Home Forums Support Controlling menu margins

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #213967
    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!

    #213973
    Leo
    Staff
    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?

    #214000
    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!

    #214006
    Leo
    Staff
    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?

    #214008
    Leo
    Staff
    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 πŸ™‚

    #214031
    Tom
    Lead Developer
    Lead Developer

    If the above doesn’t do it, a screenshot of the area would definitely help πŸ™‚

    #214079
    NBC

    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.

    #214123
    Tom
    Lead Developer
    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?

    #214124
    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.

    #214125
    Tom
    Lead Developer
    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.