-
AuthorPosts
-
January 30, 2015 at 8:25 pm #388492
I have an area that probably 25px tall that i can’t get rid of right below the header. We are using a transparent / glassy header and have shortened the height of the header. On the home page you see it when you click the first anchor link there at the top on the video – the what we do anchor is about 25px too far down. On the inner pages you see it when you click on any menu link, the blue bar should be right below the menu. It’s that 25 pixels or so that is right below the blue highlighted header in the images below. http://clstudio.com/mag
this is the css we’ve used so far to get to this point:
#top .av_header_glassy.av_header_transparency #header_main {background-color: rgba(255,255,255,0.5) !important; } /* decrease header transparency */
#header_meta {background: transparent;} /*make top navigation transparent */
.sub_menu {font-size: 14px; position: relative; left: -40px; top: 22px;} /* sub menu font size */
div .logo {float: left; position: absolute; left: 16px; top:15px;} /* logo position */
#header_main {position:relative; top:-28px !important; left:-1px !important;}
#header_main .container {height: 55px !important;}
#header_main_alternate .container {height: 35px !important;}
/* move header elements up */#top .av_header_transparency #header_meta {border: none;} /* remove upper sub-menu bottom border*/
#header_meta {border: none;} /* remove upper sub-menu border*/
#header_main {border: none;} /* remove menu border*/
#header_main_alternate {border: none} /* remove menu border*/#top .av_header_glassy.av_header_transparency .header_bg {opacity: 0.0 !important;} /* glassy hung farther than header down so remove it */
.header_bg {height: 90px;}
#header { height:90px; line-height: 90px; }
/* sticky bg hung down so move it up*/- This topic was modified 9 years, 9 months ago by Ismael.
January 31, 2015 at 11:18 pm #388872Also question #2 – when you hover over the linkable spot on the upper logo, it seems it is off and the majority of the logo is not clickable, we must have the css wrong when we moved the logo and header up?? Can you tell me how to fix this or do it correctly? Thanks!!
February 2, 2015 at 4:12 pm #389379Hey!
Please add following code to Quick CSS
.html_header_top.html_header_sticky #top #wrap_all #main { padding-top: 90px; }
You may need to adjust it, i could not see your page since it is password protected one.
and please remove following section of the code
#header_main { top: -28px !important; }
and add following one
nav.sub_menu { top: 45px; } div#header_meta { margin-top: -25px; }
Cheers!
YigitFebruary 2, 2015 at 11:48 pm #389747Thanks for the help, but that did not do it. I made the page public so you can see it.
February 3, 2015 at 4:25 pm #390160Hey!
Please try adding !important rule as following
.html_header_top.html_header_sticky #top #wrap_all #main { padding-top: 90px !important; }
Cheers!
YigitFebruary 3, 2015 at 4:35 pm #390177.Thanks!! Worked great on the inner pages.
But on the home page, when you click the link there in the top video “Learn More” and it scrolls down the page. How do I get that point moved up so that the anchor is directly below the menu and does not have that same padding or something between the menu and the anchor?
Thanks!!
- This reply was modified 9 years, 9 months ago by clcintx.
February 7, 2015 at 2:53 am #392382February 11, 2015 at 9:28 pm #394688Well we didn’t anchor to the top of the color section, we made it link to the first line of text “What we do”, not exactly what we want, but it works.
-
AuthorPosts
- The topic ‘Adjust Header Height Smaller and Move Content Right Below Header??’ is closed to new replies.