Reduce header width

  • Resolved bizzy123

    (@bizzy123)


    9 months, 2 weeks ago

    Hi, I am trying to reduce the header container width on this site, ie. to bring the site logo and menu closer together to the centre.

    I have tried adding

    max-width: 1200px; 
    margin: 0 auto;

    to the.site-header container but this does not work.

    Can anyone advise how to reduce the container width please? Thank you.

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

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

  • Your CSS should work unless something else is overriding it (perhaps due to improper placement).

    But I don’t see it on your site currently.

    Where did you add the custom CSS? If you’ve removed it, please add it back in APPEARANCE > CUSTOMIZE > ADDITIONAL CSS, and let me know so I can check to see what may be overriding it.

    Standing by.

    Thread Starter bizzy123

    (@bizzy123)

    I’d removed the code as it wasn’t working but I’ve added it back now, thank you for having a look.

    I can get the desired result by changing the width %, or adjusting the padding, but this then messes up the mobile view as it squashes the logo and menu too much.

    All I see is (no selector):

    max-width: 1200px; 
    margin: 0 auto;

    This is not targeting the “site-header container” like you mentioned in your original post.

    Change it to this: 

    .site-header {
    max-width: 1200px; 
    margin: 0 auto;
}

    … and report back so I can take a look again (if it’s still not working).

    Thread Starter bizzy123

    (@bizzy123)

    That did the trick thank you so much!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Reduce header width’ is closed to new replies.