Edit inline style in div

mrekonomi
(@mrekonomi)

4 years ago

Hi,

Thanks for an awesome theme!

I’ve added quite a lot of customer CSS to my site but there is one inline style that I can’t find anywhere. It’s in the mobile version.

<div id="mobile_menu_collapse" class="kad-nav-collapse mobile_menu_collapse in" style="height: auto;">

I would like to remove the height: auto because when I click on the menu button it first loads the height: auto and then my custom CSS.

You can check it out yourself at https://mrekonomi.se/ (mobile).

Thanks a lot!

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

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

hannah
(@hannahritner)

4 years ago
Hey @mrekonomi,
In your css try changing this:
```
.kad-nav-collapse.in {
    position: fixed;
    background: #6bbcf7;
    padding-top: 20%;
    width: 100%;
    height: 100%;
    left: 0;
    text-align: center;
}
```
to this:
```
.kad-nav-collapse.in, div#mobile_menu_collapse {
    position: fixed;
    background: #6bbcf7;
    padding-top: 20%;
    width: 100%;
    height: 100%;
    left: 0;
    text-align: center;
}
```
Does that correct this?

Hannah
Thread Starter mrekonomi
(@mrekonomi)

4 years ago

Hi Hannah,

Fantastic, it works!

I have another question, not sure how much work it would be. When I bring up the menu I can still scroll and see the below content. Do you think it’s an easy solution to disable or hide the below content so you only see what you see when you bring up the menu?

Thanks alot!
Theme Author Ben Ritner – Kadence WP
(@britner)

4 years ago
Hey,
That would require you add some javascript. Basically you need to add a class into the body tag when you open the menu and remove that class when you close the menu.

With the class then you can target the body only when the menu is open and add overflow: hidden which will prevent any scrolling.

Example js with jQuery Loaded:
```
<script>
jQuery( document ).ready(function($) {
$('.a.nav-trigger-case').on('click', function() {
if( $(this).hasClass( 'collapsed' ) ) {
  $('body').addClass('mobile-nav-open');
} else {
$('body').removeClass('mobile-nav-open');
}
});
});
</script>
```
Example css:
```
body.mobile-nav-open {
    overflow: hidden;
}
```
Ben

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

The topic ‘Edit inline style in div’ is closed to new replies.