12 replies · opened Jul 30, 2016
Can you look at this page:
http://patrickhogan.info/portfolio-single-gallery.html
and look at the local styles on the page and tell me if this is the most efficient way to control header heights over all breakpoints, not just mobile? I'm imaging there is a better way...
many thanks,
patrick
One more question. How to make sticky navigation for all breakpoints?
many thanks,
patrick
Hello,
[sb_private_reply]We Really Apologize about the Delay in replying to your Support Query and Truly Truly appreciate your Patience with us![/sb_private_reply]
Please consider using this Header Height CSS Generator: http://support.semicolonweb.com/header-height-css-generator/ .
Simply add the .sticky-responsive-menu Class to the #header Tag.
This will definitely work fine. Let us know if we can help you with anything else or if you find any further issues.
Hello,
I have the same problem as op and I've tried using the generator you provided. It worked on regular screensizes. However, when it gets to responsive state, the header bounces back to 100px height and the logo becomes huge compared to before. What CSS should I be changing?
-Jason
Hello,
Consider using the following CSS Code:
@media (max-width: 991px) {
/* For Header Height of 60px */
#logo,
#logo img { height: 60px; }
#primary-menu-trigger { top: 5px; }
#top-search a,
#top-cart,
#side-panel-trigger,
#top-account { margin: 20px 0; }
#top-search form { height: 60px !important; }
#top-cart .top-cart-content { top: 40px; }
.sticky-responsive-menu #header { min-height: 60px; }
}This will definitely work fine. Let us know if we can help you with anything else or if you find any further issues.
img seems to be working, but I still can't seem to adjust the header height to 60 px...
Hello,
[sb_private_reply]We Really Apologize about the Delays in replying to your Support Query and Really Really Appreciate your Patience with us![/sb_private_reply]
Can you please provide us with a Live URL so that we can check out the exact issue and provide you with a more accurate 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.
It's deployed at this address: https://evolveapp.io/
Thanks!
Hello,
Thanks for your Patience! We have just checked out your Website and applied the CSS Code that we provided you with earlier and the Header Height of 60px appears to be working fine for us. Please consider pasting the CSS Code we have provided you with in the Earlier Replies in the css/custom.css File (More Details regarding using the css/custom.css can be found in the Documentation > Start > Customization Section).
This will definitely work fine. Let us know if we can help you with anything else or if you find any further issues.
Hello, sorry to bother you guys again. I have tried the instructions.
Both sets of codes from the generator and the set you guys posted have been added. It still only works for browser width, though. Please see the attached two images from resizing the window.
Files
Sorry, had to adjust them to fit 512kb limit.
Hello,
Not really sure why this does not work for you as it is working perfectly fine for us. Please paste the following code in the Document <head> area just before the </head> Tag ends:
@media (max-width: 991px) {
/* For Header Height of 60px */
#logo,
#logo img { height: 60px; }
#primary-menu-trigger { top: 5px; }
#top-search a,
#top-cart,
#side-panel-trigger,
#top-account { margin: 20px 0; }
#top-search form { height: 60px !important; }
#top-cart .top-cart-content { top: 40px; }
.sticky-responsive-menu #header { min-height: 60px; }
}
and it should definitely work fine. Thanks for your Patience.
Do let us know if we can help you with anything else or if you find any further issues with Canvas.
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