5 replies · opened Apr 25, 2016
Hello,
What is the proper way to drop the header height to 50px and change the mobile logo?
I checked here: http://support.semicolonweb.com/header-height-css-generator/ but It seems to be setup for desktop and the menu button would stay in the same spot.
Thanks!
This mobile view is what I want to shrink to half the height.
Hello,
This is Definitely Possible. Please consider using the following CSS Code:
@media (max-width: 991px) {
#header,
#header-wrap,
#logo,
#logo img { height: 50px; }
#primary-menu-trigger { top: 0; }
#top-search a,
#top-cart,
#side-panel-trigger {
margin-top: 15px;
margin-bottom: 15px;
}
#top-search form { height: 50px !important; }
#top-cart .top-cart-content { top: 35px; }
}This will definitely work fine.
And for an Alternate Mobile Logo, simply add the data-mobile-logo="demos/media-agency/images/logo-mobile.png" attribute to the Logo img Tag.
Let us know if we can help you with anything else or if you find any further issues.
this works perfect!
Last header change :)
I want white header background for mobile with transparent header on desktop.
THANK YOU!
I want white header background for mobile with transparent header on desktop.
Can you please provide the custom css?
Thanks!
Hello,
You can simply data-responsive-class="not-dark" attribute to the #header Element.
This will definitely work fine. 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