Pushing website logo to the left to make more room for menu items

[mjloudermilk]

Hello,

I’m trying to find a way to push the logo on the following site 1-2 inches left, so there would be more room for menu items. Is there an easy way to do this? Thanks for your help!

The site is: https://www.nelc-law.org

[nabeel]

Hi Michael,

Thank you for reaching out to us. To make more space in the navigation bar, try adding the following code in the Theme Options > CSS:

.x-navbar .x-container.max {
    max-width: 100%;
}

.x-navbar .x-container.width {
    width: 95%;
}

Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

• Intro to CSS - https://goo.gl/mFuWQT
• How to get CSS selectors - https://goo.gl/BmoH39
• Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa
• CSS Media Queries - https://goo.gl/L3ZHNg

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

[mjloudermilk]

Thanks for your help! It looks like that was able to successfully push the logo to the left on https://www.nelc-law.org, but the menu itself hasn’t shifted to the left. Was there an additional piece of CSS needed to shift the menu too? Thanks again!

[nabeel]

Hey Michael,

That is intentional, you can add more menu items and the navigation bar will auto adjust and it will take the space from the left side by keeping the navigation bar right aligned with the content below. However if your want to shift the whole navigation bar to the left then you can add the following code as well:

.masthead-inline .desktop .x-nav {
    float: left;
    margin-left: 20px;
}

Hope this helps!