3 replies · opened Jan 18, 2017
Hi,
On the one page template I set the added the class sticky-responsive-menu on the body to have the top menu fixed on top on mobile devices. However, I want to get rid of the resizing. Instead of it being 100px height on the home page and then resized to 60px. I want it fixed at 60px. Any idea how to get that done?
Here's a link to the live test: http://sandbox.outflink.com
Thanks a lot, keep up the great work!
Hello,
This is Definitely Possible. Please consider using the following CSS Code:
@media (max-width: 991px) {
.sticky-responsive-menu #header:not(.sticky-style-2):not(.sticky-style-3) { min-height: 60px; }
.sticky-responsive-menu #header-wrap {
z-index: 199;
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #FFF;
border-bottom: 1px solid #EEE;
-webkit-backface-visibility: hidden;
}
.sticky-responsive-menu #logo,
.sticky-responsive-menu #logo img { height: 60px; }
.sticky-responsive-menu #primary-menu-trigger { top: 5px; }
.sticky-responsive-menu #primary-menu > ul,
.sticky-responsive-menu #primary-menu > .container > ul {
max-height: 300px;
overflow-y: scroll;
}
.sticky-responsive-menu #primary-menu > ul,
.sticky-responsive-menu #primary-menu > .container > ul { margin-bottom: 20px !important; }
.sticky-responsive-menu #top-search a,
.sticky-responsive-menu #top-cart,
.sticky-responsive-menu #side-panel-trigger { margin: 20px 0; }
.sticky-responsive-menu #top-search form { height: 60px !important; }
.sticky-responsive-menu #top-cart .top-cart-content { top: 40px; }
}This will definitely work fine. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Thanks. I made the change and it works. The problem is that when the screen width is between 992px and 1008px the top menu breaks. You can see it live here:
I'm attaching an image of the bug just in case. Any ideas on how to fix this?
Thanks again!
Hello,
This happens when the Size of the Menu Items is larger than the available width in the Menu Area. This can be fixed easily by adding the following CSS Code:
.device-md #primary-menu ul > li > a {
font-size: 12px;
letter-spacing: 0;
padding-left: 14px;
padding-right: 14px;
}This will definitely fix the issue. 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