Canvas Support

How to change header height properly + How to force header in mobile style ?

1 reply · opened Mar 22, 2018

CCrohmMar 22, 2018

Hello,

I hope you will be able to help me with this little problem :)

I have the following header :


	
		
			
			
			
				[
![attachment](/images/fr/logo/logo.svg)
](/)
				[
![attachment](/images/fr/logo/logo.svg)
](/)
			
			
			
				
					
- [Page 1](/)
					
- [Page 2](#)
					
- [Page 3](#)
					
- [Page 4](#)
					
- [Page 5](#)
					
- [Page 6](#)
					
- [Page 7](#)
					
- [Page 8](#)

As my logo and header texts are sometimes colliding depending on the browser width, I would like to reduce the height of the header depending on the screen width, using media queries.

The documentation says we can use the following CSS :

#header,
#header-wrap,
#logo,
#logo img,
#primary-menu:not(.style-2),
#primary-menu:not(.style-2) > ul,
#primary-menu,
#primary-menu ul,
#primary-menu ul li a { height: 100px; }
 
#primary-menu ul li a { line-height: 100px; }
 
#primary-menu ul li i { line-height: 99px; }
 
#primary-menu ul ul,
#primary-menu ul li .mega-menu-content,
#primary-menu ul li.mega-menu .mega-menu-content { top: 100px; }
 
#primary-menu.sub-title ul li a { padding: 27px 20px 32px; }
 
#top-search,
#top-cart { margin: 40px 0 40px 15px; }
 
@media (max-width: 991px) {
    #primary-menu-trigger { top: 25px; }
    #top-search a { margin-top: 40px; }
    #top-search form { height: 100px !important; }
}

But when I try that, my texts are not aligned any more in the header and everything seems broken...

Do you have any idea on how we should do to modify the header height properly using media queries ?

Also, is there a way to force the header to display in mobile style (burger menu) using media queries, even if we are on desktop ?

Thank you very much.

SSemicolon WebSTAFFMar 27, 2018

Hello,

  1. You can definitely use the above code, but you will need to change the above values based on your Header's Height. The above code is for the Header Height of 100px. Consider using: http://support.semicolonweb.com/header-height-css-generator/ to generate your Header's Height.

  2. This should be Definitely Possible but you will need to move all the #header, #logo and #primary-menu Related CSS Code Blocks in the css/responsive.css File from the @media (max-width: 991px) Media Query to the Top of the File and outside of all the Media Queries.

This will enable the Mobile Menu in All Screen Widths. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

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
How to change header height properly + How to force header in mobile style ? · Canvas Template Support