Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #23484

    Hello,

    How can I change the width of the menu box?

    I have 7 pages to display in the menu (Home, About us, …). Currently, the first six are on the same line but the 7th is going to the next line which does not look good. I believe this is because the menu box is set to a maximum width. How to change it? Maybe by changing the ccs? But how?

    FYI, I’m using the Swifty theme.

    Thank you for your help.

    Regards,

    Christophe

    #23486
    Arnel C
    Member

    Hello Christophe,

     

    I spoke with one of the developers to get an answer to your question.  He provided the following code for adjusting the menu size:


    @media
    only screen and (min-width : 992px) {
    .col-md-6.header-6 {
    width: calc(100% * (1 / 3));
    }
    .col-md-6.header-7 {
    width: calc(100% * (2 / 3));
    }
    }

     

    You can change the widths as needed.  The sizes are proportional so the code above would make the site title/tagline area 1/3 of the space, and the menu 2/3 of the space. That ratio could be changed to 1/4 and 3/4 if you need even more for the menu.

    The code above should be applied to the CSS editor in the Customize section.  To get there:

    1. Log in to the WordPress Admin Dashboard
    2. Click on Customizer
    3. Click on Advanced
    4. Click on Custom JS and CSS
    5. Click on OPEN EDITOR for Theme CSS (blue button)

    Then you can paste the code in and save it by clicking on the ‘x’ in the top right-hand corner.

    I hope that helps!

    #23485
    chris74008
    Member

    Wow! Thank you so much for the quick and clear response. It works perfectly, exactly what I wanted. Awesome support!

Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘How can I change the menu box width?’ is closed to new replies.