Docs

[mathijs84]

Higuys,

On http://www.streamads.work-planning.com/ I have a transparant menu with the menu items in the video.

On mobile the menu is still above the picture. Can we also make the menu items in the picture on mobile?

See attached file

[Joao]

Hi there,

Could you try please adding the following code to your Customizer/ CSS

@media only screen and (max-width: 767px) {

body {
  margin-top: none !important;
}
}

Hope that helps,

Thanks,

Joao

[mathijs84]

that doesnt seem to work

[Paul R]

Hi,

You can try this code instead.

@media (max-width: 979px) {
body {
    margin-top: 0px !important;
}
}

Hope that helps.

[mathijs84]

This reply has been marked as private.

[Paul R]

Hi,

Thank you for providing your login credentials.

Please replace this code.

/* push down site by height of menu */
body { margin-top:67px !important; }

with this

@media (min-width: 979px) {
/* push down site by height of menu */
body { margin-top:67px !important; }
}

http://screencast.com/t/SvZxvHBXH0

Thanks

[mathijs84]

Great that works perfect.

I also used it on nvision.work-planning.com but the mobile item is not quite in the center. can we fix that?

Also i made the mobile menu sticky but after i activated the plugin it doesnt work anymore. I used this code:

/*
// MAke mobile menu sticky
*/

@media (max-width: 979px) {
.x-navbar-fixed-top {
position: fixed !important;
}
}

In the mobile menu plugin i can make the menu item sticky, but i also want the topbar to be sticky

[Nabeel A]

Hi again,

To center align the button, try this code:

.taptap-menu-button-wrapper {
    margin-top: -8px !important;
}

To make the topbar sticky, you can add the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

jQuery(document).ready(function($){
	var topbar = $('.x-topbar').height();
	$(window).scroll(function(){
		if ($(this).scrollTop() > 0) {
			$('.x-navbar, .x-topbar').css({"position": "fixed", "width": "100%"});
			$('.x-navbar').css("margin-top", topbar + 'px');
		} else {
			$('.x-navbar, .x-topbar').css("position", "relative");
			$('.x-navbar').css("margin-top", "0");
		}
	});
});

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[mathijs84]

Thanks, it worked great!!

I found 1 thing on bouwbedrijfheemskerk.

On a portfolio item page, the mobile menu is not yet up as the other pages. See for example http://www.bouwbedrijfheemskerk.nl/portfolio-item/zolder-leegwater-hillegom/

Your provided this code:

@media (min-width: 979px) {
/* push down site by height of menu */
body { margin-top:67px !important; }
}

It didnt quite work and seemed like something was overriding it.

We changed it to this and it worked:

body.page { margin-top:0px !important; }
}

But now we only need the portfolio-item page to work

[Rupok]

Hi there,

Thanks for updating. Let’s add this as well :

body.single-x-portfolio {
  margin-top: 0 !important;
}

Hope this helps.

Cheers!

[mathijs84]

Yup.

it works!!

There i only now an issue with the menu on safari. As you can see, there on mobile it looks very good, but on desktop on my laptop (in safari) the mobile menu is still there so the normal menu doesnt show.. and there is still space above the topbar!!

On Safari: http://prnt.sc/b18zx2

On chrome and how it should look: http://prnt.sc/b1903q

[Rue Nel]

Hello There,

Please make sure that every html code you have added is valid. Please do not leave any html tags unclosed. Upon checking the site there are broken html codes. You can see it here:
http://prntscr.com/b19rmv
https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.bouwbedrijfheemskerk.nl%2F

Hope this helps.

[mathijs84]

Hi rue,

I am working on it and have solved most of the Codes.

Not sure how to solve #10

https://validator.w3.org/nu/?showsource=yes&showoutline=yes&showimagereport=yes&doc=http%3A%2F%2Fwww.bouwbedrijfheemskerk.nl#l776c101

Any idea and is that causing my issue on safari??

[John Ezra]

Hi there,

Thanks for updating the thread! It means you can’t have a style element within the body element. The <style> “element” is used in the head section before the body section.

You can use inline styles within the body but not as an element. You will need to move that code into the head or put it in an external CSS file and link it in the head section that way.

It may be a cause for what is happening on safari, but we will need to see. Please go ahead and fix that.

Let us know how that goes. Hope this helps – thanks!

[mathijs84]

Hi John,

The issue with style element is fixed!!

Unfortunately the safari issue is still there.

[Author]

Posts