Mobile header transparent & overlay hamburger menu

Hi!

I'm using the business template and the hamburger menu from cafe template for desktop, this together with the fullscreen slider works fine on desktop. But I'm having trouble on mobile version to achieve the same results.

How can I change:

• The hamburger menu on mobile/tablet so it overlays (same as on desktop with background) and doesn't push the navbar down? And if possible move the hamburgericon to the right instead of left?
• Slider fullscreen on mobile/tablet, I tried adding "force-full-screen" in id=slider which increases the size but the navbar is still grey or white. I would like a transparent navbar as on desktop.

Here is a good example of what I'm trying on mobile: https://ca-commercial.com/

Thanks!

mnordlin

Another idea would simply be to disable the mobile primary menu trigger, but not sure how to do that.

BR,

mnordlin

Hi!

I found this link: http://support.semicolonweb.com/forums/topic/overlay-menu-in-mobile-version/

I followed 1-3 but couldn't locate 4. Remove the .visible-lg-block and the .visible-md-block Class from the #overlay-menu-close Element. ? Where is that code?

So following only 1 - 3 it doesn't work.

Thank you,

mnordlin

My testsite is on https://beta.lindebarn.com/lindebarn/ if that helps. Thanks for a great theme!

Hi!

Sorry I couldn't get it to work. Just to clarify

Is 1. from style.css? Row 1609 matches your code, i.e. I didn't do any changes there, is that correct?

1. I deleted row #primary-menu > ul from responsive.css

2. Deleted

#primary-menu ul li {
float: none;
margin: 0 !important;
text-align: left !important;
border-top: 1px solid #EEE;
}

from responsive.css

1. I deleted .d-none and .d-lg-block from bootstrap.css , is that correct?

I'm attaching my files if you can have a look?

Thank you

This is how the site looks like now, the menu is open without clicking on the hamburger menu.

That's on localhost, I'm testing on localhost before uploading to the server.

Sorry I attached the wrong version of style.css, I kept only the following code. My client is really keen on getting the overlay hamburger menu working in mobile, thanks!

@media (min-width: 992px) {

.overlay-menu:not(.top-search-open) #primary-menu-trigger {
opacity: 1;
pointer-events: auto;
left: auto;
right: 75px;
width: 20px;
height: 20px;
line-height: 20px;
margin-top: -10px;
}

.overlay-menu:not(.top-search-open) .full-header #primary-menu-trigger { right: 90px; }

}

/* ----------------------------------------------------------------
Top Search
-----------------------------------------------------------------*/

I followed this answer to get the slider full-page in mobile with mobile header, it worked out nice!
http://support.semicolonweb.com/forums/topic/how-to-make-the-mobile-header-transparent-in-landing-4-html-template/

if you check https://beta.lindebarn.com/lindebarn

Now if you click the hamburger menu it still pushes the mobile navbar down. If you please can have a look at the css files I sent. I would highly appreciate it if we can get the same overlay menu as on desktop version!

Thanks!