I'd like to control the height of my nav bar (header) more precisely between Desktop, Tablets and Mobile.
If I look at www.apple.com and youtube.com, then I notice that the height of their nav bar remains constant when I drag the browser window from desktop size to mobile size.
But with my SquareSpace 7.1 site, the nav bar height does not remain constant while I drag the browser window smaller or larger.
How would one achieve a consistent height for the nav bar, as with Youtube and Apple, across devices / window sizes ?
My own attempt at CSS (see below) works to some degree, but only at specific, static window sizes, but not when I manually drag the browser window left and right. The height of the nav bar keeps shifting as the window size increases or decreases. The same applies to the logo, text and burger bar inside the nav bar, which also shifts when the window size shifts (see screenshots).
Any advice would be greatly appreciated!
Thank you kindly.
/* ----------MY ATTEMPT AT CSS TO KEEP THE NAV BAR HEIGHT CONSISTENT ACROSS ALL WINDOW SIZES AND DEVICES------------------- */
// CSS FOR TABLET AND MOBILE //
@desktop: ~"only screen and (min-width: 1025px)";
@mobile: ~"only screen and (max-width: 767px)";
@tablet: ~"only screen and (min-width: 768px) and (max-width: 1024px)";
/* ----------------------------- */
// HEADER HEIGHT - LESSON 1 - DESKTOP //
@media @desktop {
#collection-5ece5287d9f131439a163282 {
#header .header-inner {
padding-top: 0px;
padding-bottom: 15px;
}
.header-announcement-bar-wrapper {
margin-top: -15px;
height: 90px !important;
}
}
}
// HEADER HEIGHT - LESSON 1 - MOBILE //
@media @mobile {
#collection-5ece5287d9f131439a163282 {
#header .header-inner {
margin-top: -15px;
}
.header-announcement-bar-wrapper {
margin-top: -9px;
height:80px !important;
}
}
}
// HEADER HEIGHT - LESSON 1 - TABLET //
@media @tablet {
#collection-5ece5287d9f131439a163282 {
#header .header-inner {
margin-top: -5px !important;
}
.header-announcement-bar-wrapper {
margin-top: 0px;
height:80px !important;
}
}
}
Thanks so much for getting back to me, @rwp.
I tried this, but it doesn't seem to have any effect to help keep the nav bar height constant while I change the browser window size.
But @tuanpha
Question
pflombard 4
Site URL: http://s15.squarespace.com/guitar-kids-a-lesson-1
Hi Community! Can you help?
I'd like to control the height of my nav bar (header) more precisely between Desktop, Tablets and Mobile.
If I look at www.apple.com and youtube.com, then I notice that the height of their nav bar remains constant when I drag the browser window from desktop size to mobile size.
But with my SquareSpace 7.1 site, the nav bar height does not remain constant while I drag the browser window smaller or larger.
How would one achieve a consistent height for the nav bar, as with Youtube and Apple, across devices / window sizes ?
My own attempt at CSS (see below) works to some degree, but only at specific, static window sizes, but not when I manually drag the browser window left and right. The height of the nav bar keeps shifting as the window size increases or decreases. The same applies to the logo, text and burger bar inside the nav bar, which also shifts when the window size shifts (see screenshots).
Any advice would be greatly appreciated!
Thank you kindly.
/* ----------MY ATTEMPT AT CSS TO KEEP THE NAV BAR HEIGHT CONSISTENT ACROSS ALL WINDOW SIZES AND DEVICES------------------- */ // CSS FOR TABLET AND MOBILE // @desktop: ~"only screen and (min-width: 1025px)"; @mobile: ~"only screen and (max-width: 767px)"; @tablet: ~"only screen and (min-width: 768px) and (max-width: 1024px)"; /* ----------------------------- */ // HEADER HEIGHT - LESSON 1 - DESKTOP // @media @desktop { #collection-5ece5287d9f131439a163282 { #header .header-inner { padding-top: 0px; padding-bottom: 15px; } .header-announcement-bar-wrapper { margin-top: -15px; height: 90px !important; } } } // HEADER HEIGHT - LESSON 1 - MOBILE // @media @mobile { #collection-5ece5287d9f131439a163282 { #header .header-inner { margin-top: -15px; } .header-announcement-bar-wrapper { margin-top: -9px; height:80px !important; } } } // HEADER HEIGHT - LESSON 1 - TABLET // @media @tablet { #collection-5ece5287d9f131439a163282 { #header .header-inner { margin-top: -5px !important; } .header-announcement-bar-wrapper { margin-top: 0px; height:80px !important; } } }
Link to post
Top Posters For This Question
2
1
Popular Days
Jul 21
1
Jul 25
1
Jul 26
1
Top Posters For This Question
pflombard 2 posts
rwp 1 post
Popular Days
Jul 21 2020
1 post
Jul 25 2020
1 post
Jul 26 2020
1 post
Popular Posts
pflombard
Thanks so much for getting back to me, @rwp. I tried this, but it doesn't seem to have any effect to help keep the nav bar height constant while I change the browser window size. But @tuanpha
rwp
.header-announcement-bar-wrapper { height: 100% !important; }
Posted Images
2 answers to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment