[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
    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 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 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 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

    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

    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

    Awesome, glad I could help 🙂

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

You must be logged in to reply to this topic.