Reducing padding left/right of logo in nav

  • Resolved ambern

    (@ambern)


    3 years, 10 months ago

    Hey all, I’m using Ocean WP free with Elementor free and want to reduce the padding to left and right of the logo. Website is still under construction. Used another code I found online previously but it resulted in the right side menu overlapping onto the logo at a smaller screen size. Anyone have a code for this?

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi, @ambern

    As far as I can see, that element doesn’t have any padding rules on it. Instead, it has:

    • .left-menu – 38% width
    • .middle-site-logo – 24% width
    • .right-menu – 38% width

    So, you’d have to reduce the middle one’s width and increase the menu’s.

    Try adding this in Dashboard – Appereance – Customize – Additional CSS in the Customizer

    Here’s some code tested in such way that on smaller screens it doesn’t overlap the logo:

    #site-header.center-header #site-navigation-wrap .left-menu, #site-header.center-header #site-navigation-wrap .right-menu {
    width: 40.5%;
}
#site-header.center-header #site-navigation-wrap .middle-site-logo{
    width:19%;
}

    You can change those percents as you wish. Just make sure they sum up to 100%

    You can learn how to use the Chrome Developer Tools or Firefox Developer Tools to help you see and test changes to your CSS.

    Hope this helps,
    Kind regards!

    Thread Starter ambern

    (@ambern)

    @vladytimy this worked well, thank you.

    Happy to help! Glad it works!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Reducing padding left/right of logo in nav’ is closed to new replies.