[Support request] How to change style on mobile menu?

[Anonymous]

Hello my mobile menu its showing half the screen, on a black background and with a transparent background covering website.

I would like to change it to look like this website on textbox but, using same font style that I am using on desktop menu, remove the black background and leave pink one, show menu in all screen vertical and remove transparent background so, user can see website even with open menu.

My website: https://www.shopbelleza.com/

Thanks!

[David]

Hi there,

your menu style is a ‘left over’ from an older site you imported.
Go to Customizer > Additional CSS and remove:

.slideout-header {
    background-color: #0b0521;
}

.slideout-header .slideout-exit {
    color: #fff;
    background-color: #ff3366;
}

.slideout-header .custom.slideout-toggle a {
    background-color: #ff3366;
}

#generate-slideout-menu .slideout-menu li {
    background-color: #0b0521;
}

And this ( note below code box scrolls ):

/* SLIDE OUT NAVIGATION */

.main-navigation.offside {
    overflow: visible;
}

/* style and position Custom Slideout toggle */

.slideout-header .slideout-exit:before {
    font-family: GeneratePress;
}

.slideout-header {
    padding: 0 20px;
    line-height: 40px;
}

.custom.slideout-toggle a, .slideout-header .slideout-exit {
    width: 40px;
    text-align: center;
	cursor: pointer;
}

.custom.slideout-toggle a {
    position: relative;
}

.slideout-header .slideout-exit {
    position: absolute;
}

.offside--right .slideout-header .custom.slideout-toggle a {
    left: -60px;
}

.offside--right .slideout-header .slideout-exit {
    left: -40px;
}

.offside--left .slideout-header .custom.slideout-toggle a {
    right: -245px;
}

.offside--left .slideout-header .slideout-exit {
    right: -40px;
}

.slideout-navigation.is-open .slideout-menu {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition-delay: .35s !important;
    transition-delay: .2s !important;
}

.slideout-menu {
    -webkit-transform: translate3d(0, -140%, 0);
    transform: translate3d(0, -140%, 0);
    overflow: hidden;
}

.main-navigation.offside {
    height: auto;
}

.offside-js--interact .offside, .offside-js--interact .offside-sliding-element, .slideout-navigation.is-open .slideout-menu, .slideout-menu {
    -webkit-transition: all 500ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
    transition: all 500ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

/* PAGE HERO */
/* single ppst hero meta */

.hero-category a, .post-nav, .entry-meta .cat-links a {
    padding: 6px 12px;
    border-radius: 3px;
    font-size: 0.7em;
    text-transform: uppercase;
}

.hero-byline {
    font-size: 0.9em;
}

.hero-category, .entry-meta .cat-links {
    visibility: hidden;
}

.hero-category a, .entry-meta .cat-links a {
    visibility: visible;
    margin-bottom: 10px !important;
}

.entry-meta .cat-links:before {
    display: none;
}

.page-hero.overlay {
	box-shadow: inset 0px 100px 83px -15px rgba(0,0,0,0.75);
}

[Anonymous]

Hello David,

I added code, it looks bigger but, still missing a few things that are black background still there, transparent curtain on website still there and menu is not fullwidth vertically like the one on website I mention it only shows half screen or less.

[Tom]

Hi there,

You’ll want to remove the code that David highlighted here. You should find it in Customize > Additional CSS. If you remove the code he shared here (which already exists on your site), your mobile menu should go back to normal.

[Anonymous]

Hello David, sorry I miss understood you before, thanks for the clarification Tom 🙂

I remove this code you mention and yes black background is gone and also it showing full width now vertically the menu.

The only things left would be the following:

1) Would like to show same font as on normal menu since shows too small

2) Would like to remove transparent curtain on the right and show it fullwidth like shows on url on textbox.

Thanks!

[David]

1. Go to Customizer > Typography > Off Canvas where you can change the font size and weight to match your primary navigation.

2. I am not sure i understand – if you want to remove the Overlay ( curtain ) so you still see the site behind it – then add this CSS:

.slideout-overlay {
    background-color: rgba(0,0,0,0);
}

[Author]

Posts