mobile menu transparent, and missed up, the header is wrongly set

7 replies · opened Sep 20, 2016

Dda3karisSep 20, 2016

DEar All, i want to make the header and menu on the mobile to stuck on the top of the page with a fixed height 80px, while on the website to stay as it is.
the menu also is transparent on the mobile and i need it to be notransparent.

best regards

SSemicolon WebSTAFFSep 20, 2016

Hello,

This is Definitely Possible. Please follow the Steps below:

  1. Remove the style="height:100px;" from the .container DIV inside the #header tag as it is causing a Height Conflict.

  2. Add the following CSS Code to make the Header's Height 80px:

@media (max-width: 991px) {

	/* For Header Height of 80px */

	#logo,
	#logo img { height: 80px; }

	#primary-menu-trigger { top: 15px; }

	#top-search a,
	#top-cart,
	#side-panel-trigger,
	#top-account { margin: 30px 0; }

	#top-search form { height: 80px !important; }

	#top-cart .top-cart-content { top: 50px; }

	.sticky-responsive-menu #header { min-height: 80px; }

	.responsive-sticky-header #logo, .responsive-sticky-header #logo img { height: 80px; }

	.responsive-sticky-header #primary-menu-trigger { top: 15px; }

}

This will definitely work fine. Let us know if we can help you with anything else or if you find any further issues.

Dda3karisSep 21, 2016

the logo size and the the menu adgustment are very good, thanks. but the header size (the container) of the header is more than 80PX, could you please check this?

one more thing the menu background is transparent, i need to make it white.

thanks alot for your fast reply.

Dda3karisSep 21, 2016

Dear all,
Please note that all my comments are done, exept one thing.
The menu should be visible on the slider top or bottom on mobile
when you scroll down you feel something wrong, like the menu go up in the middle of the slider i need to fix this. in the worst case to get rid of that, could we fix the menu on the top? and make it static-sticky ?

best regards,

Dda3karisSep 27, 2016

please i need to fix the menu position on the mobile. as i sent in the last comment

SSemicolon WebSTAFFSep 30, 2016

Hello,

We Really Apologize about the Delays in providing you with a Solution for this issue. But we assure you that we are continuously working on fixing this for you. However, we are currently limited because there a Lots of Customized Codes for your Header which is making the process slightly difficult for us. Nonetheless, please allow us some more time before we provide you with a Proper Solution for this. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

Dda3karisOct 4, 2016

thanks a lot for your valuable reply, and i appreciate the fact of trying to help all the customers, if it is easy for you to fix the header on mobile directly on top like the original theme, it would be great for me.

best wishes.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard