Changes to Mobile Layout

Try adding this CSS to Appearance> Theme Options> Advanced Settings.

.nav-trigger-case .kad-navbtn {
    line-height: 35px;
}

.nav-trigger-case .kad-menu-name {
    line-height: 35px;
    font-size: 16px;
}

Let me know if that works for you.

Hi Kevin,

I put it in the Custom CSS Box under advanced settings, but I don’t see any changes.

Try adding !important tags to it.

.nav-trigger-case .kad-navbtn {
    line-height: 15px !important;
}

.nav-trigger-case .kad-menu-name {
    line-height: 15px !important;
    font-size: 10px !important;
}

Also, what is this for?
{mobile layout}

I see a few instances of text wrapped in brackets in your CSS. If those are comments, then you want to wrap them in these /* */

Thanks Kevin, I have updated the comments.
As for the CSS, unfortunately I’m not having much luck with it. I’m still not seeing the difference. Would you have any other suggestions?

Thanks again.

Hey,
You are adding this css:

@media (max-width: 768px){
.container {
    padding: 10px;
}
}

That is giving you the extra padding. I really suggest against adding css like that can you tell me why your doing it and maybe I can give you better css.

Kadence Themes

I have updated the css and it worked!

I had another question in the original post – Is it possible to shrink the height of the menu bar and the size of the word ‘Menu’? (I would like to make the bar and the font smaller)

Thanks again.

The above CSS that I gave you should be having this effect.

I don’t know why it’s not working when you paste it. We’ll have to wait for the developer to take a look to see if he has anymore insight.

The code works fine in chrome inspect tool. I’m not sure what’s preventing it from showing up on your site.

IN your custom css box you have a lot of really bad code and it’s breaking your css.

For example:

function home_page_menu_args( $args ) {
$args['show_home'] = true;
return $args;
}
add_filter( 'wp_page_menu_args', 'home_page_menu_args' );

^^^ that is a php function not css and shouldn’t be in your css scripts.

[nimble-portfolio post_type="portfolio" taxonomy="nimble-portfolio-type" skin="default" orderby="menu_order" order="ASC" ]

^ That is a shortcode not css and also should not be in your custom css box.

//Gap btw slider and portfolio//

^ That is not how you add a comment in css. Should be:

/* Gap btw slider and portfolio */

{Search Bar Color }

^^ That is not how you add a comment in css should be:

/* Search Bar Color */

<script async defer data-pin-hover="true" data-pin-round="true" src="//assets.pinterest.com/js/pinit.js"></script>

^^ That is a script, also not css and should not be in your custom css box.

Please fix all your css issues.

Kadence Themes

Hello,

I have fixed the above css issues. Unfortunately, I’m still not seeing any changes to the mobile menu bar height and font size. Any idea why I’m not seeing the changes?

I have used this css:

.nav-trigger-case .kad-navbtn {
    line-height: 10px !important;
}

.nav-trigger-case .kad-menu-name {
    line-height: 10px !important;
    font-size: 10px !important;
}

Thanks!
Alice

I still see errors in your css. Take the css you posted here and place it at the top of your custom css box before any of your errors and you will be able to see it working.

Kadence Themes

Thank you!