Okay
  Public Ticket #2253644
Menu Cell Padding
Open

Comments

  • tednlim1987 started the conversation

    How can I decrease the menu size or decrease the cell padding between the menu buttons for the main menu navigation at the top of the page? I want to be able to add another menu button without my logo going above the menu due to the logo size.

    And/or, how can I make the logo go above the menu and centered?

  •  724
    Barry replied

    Hi there,

    To decrease the padding between the menu links please add the following CSS code to Appearance -> Customize -> Additional CSS:

    @media (min-width: 992px) {
        .main-navigation > li.menu-item-has-children::after {
            position: relative;
        }
        .main-navigation > li > a {
            padding-left: 6px;
            padding-right: 6px;
        }
    }
    @media (min-width: 1200px) {
        .main-navigation > li > a {
            padding-left: 14px;
            padding-right: 14px;
        }
    }
    

    You can decrease both 6px and 14px values to your own needs.

    To keep the logo centered above the navigation please add the following to the Additional CSS panel:

    @media (min-width: 992px) {
        .header .header-wrapper .header-logo {
            display: flex;
            justify-content: center;
            float: none;
            height: auto;
        }
    }
    

    Hope this helps.

    Best regards,
    Barry

  • tednlim1987 replied

    Thank you, that helped.

    How do I make the site description text size bigger, and make it one line?

  •  724
    Barry replied

    You're welcome!

    To make the site description text on one line you need to make the left topbar column full width, by using the following custom CSS:

    @media (min-width: 992px) {
        .header-topbar .col-md-4 { width: 100%; }
    }
    

    To increase the site description font size please add the following:

    .header .header-topbar .header-description { font-size: 14px; }
    

    Best regards,
    Barry

  • tednlim1987 replied

    Is there a way to decrease the space between the menu and the downward arrow? Currently there is a bigger space between the menu item and the downward arrow compared to the menu to the right of the downward arrow. 

    https://thekilophysio.com/

  •  724
    Barry replied

    Hi there,

    Sure, you can add the following snippet to Appearance -> Customize -> Additional CSS:

    @media (min-width: 1200px) {
        .main-navigation > li.menu-item-has-children a {
            padding-right: 8px;
        }
    }
    

    The 8px value can be changed to your own needs.

    Hope this helps.

    Best regards,
    Barry