Okay
  Public Ticket #2253644
Menu Cell Padding
Closed

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?

  •  788
    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?

  •  788
    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/

  •  788
    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

  • tednlim1987 replied

    How do I add/embed in a widget? What I want to do is to add in a scheduling widget from a different site, but I do not know how to do this or could figure out how to do this. I was provided a CSS code for this.

  •  788
    Barry replied

    Hi there,

    This depends on what kind of integration/embed the developer of this scheduling application provides. In most cases it will be by using an HTML iframe that you can add to a "Custom HTML" widget to the theme.

    Can you show me the code they provided you need to add to your website and the name of this scheduling widget?

    Best regards,
    Barry

  • tednlim1987 replied

    This is the widget code I am supposed to add.

    <!-- Start SimplePractice Booking Widget Embed Code -->
    <style>.spwidget-button-wrapper{text-align: center}.spwidget-button{display: inline-block;padding: 12px 24px;color: #fff !important;background: #de6a26;border: 0;border-radius: 4px;font-size: 16px;font-weight: 600;text-decoration: none}.spwidget-button:hover{background: #d15913}.spwidget-button:active{color: rgba(255, 255, 255, .75) !important;box-shadow: 0 1px 3px rgba(0, 0, 0, .15) inset}</style>



    <!-- End SimplePractice Booking Widget Embed Code -->

  •  788
    Barry replied

    Thank you.

    You can add this code to your website by adding a "Custom HTML" widget to the page builder and copy/paste the entire code to this widget.

    Best regards,
    Barry