[Support request] Button in Mobile Menu – Add Margin without impacting Primary NAV

[Kyle Calzaretta]

@media {
.main-navigation .main-nav ul li.nav-button a {
background-color: #00baff;
color: #ffffff;
font-size: 18px;
cursor: pointer;

line-height: 45px; /*this number will likely need to be adjusted*/;

border-radius: 30px;

}

line-height: 50px; /*this number will likely need to be adjusted*/;
width: 120px;
border-radius: 30px;
}

@media {
.main-navigation .main-nav ul li.nav-button a {
background-color: #00baff;
color: #ffffff;
font-size: 18px;
cursor: pointer;

line-height: 45px; /*this number will likely need to be adjusted*/;

border-radius: 30px;

}

Was successful in modifying this CSS from support, removing the Min-Max, but I want to add Margin in the Mobile Menu and when I do so, it messes up the Primary NAV Button. Can you please assist?

[Fernando]

Hi Kyle,

In what way do you want to add spacing to the Mobile Menu?

Are you wanting to push down the first section? If so, you can try adding top padding through Appearance > Customize > Layout > Container.

Alternatively, you can try this CSS if you want something page-specific for mobile view:

@media (max-width: 768px) {
    .page-id-19647 .site-content {
        margin-top: 40px;
    }
}

[Kyle Calzaretta]

Actually, want to create padding on left and right side of the button in the mobile menu.

So the button is centered and smaller in the middle of mobile menu vs. full width

[Fernando]

Are you referring to the Toggle menu button or a specific button in your Off canvas menu(eg. Play)?

[Kyle Calzaretta]

Yes, the Play Button in off-canvas menu

[Fernando]

I see. Can you try adding this CSS:

nav#generate-slideout-menu .slideout-menu li:last-of-type {
    width: unset;
    margin-left: auto;
    margin-right: auto;
}

[Author]

Posts