Tagged: , ,

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • February 3, 2019 at 3:23 pm #1062239
    Munford

    HI, I am using the following css to make my mobile header transparent and sticky, which works fine on pages I have designated a transparent header (the landing page below) but on the other pages with a normal header, the content is hidden under the header (due to the padding=0 I guess). How can I fix this padding issue on the non-transparent headers?

    /*----------------------------------------
// transparent header mobile fix
//--------------------------------------*/
 @media only screen and (max-width: 767px) { 
#top #wrap_all .av_header_transparency, 
.av_header_transparency #advanced_menu_toggle {
  background: transparent!important;
  position: absolute!important;
	 }}

@media only screen and (max-width: 767px) {
.responsive #top #wrap_all #header {
    position: fixed;
}

.html_header_top.html_header_sticky #top #wrap_all #main {
    margin-top: 0 !important;
    padding-top: 0 !important;
    top: 0 !important;
}

.responsive #top .av_header_transparency .logo img.alternate {
    display: block;
}

.responsive #top .av_header_transparency.av_alternate_logo_active .logo a > img {
    opacity: 0;
}

.responsive #top .av_header_transparency.av_alternate_logo_active.header-scrolle
 .logo a > img {
    opacity: 1;
}

#top .header_color.av_header_transparency .av-hamburger-inner, #top .header_color.av_header_transparency .av-hamburger-inner::before, #top .header_color.av_header_transparency .av-hamburger-inner::after {
    background-color: #ffffff;
}
}

    also – how do I control the overall height of the mobile header? I’d like it a bit shorter.

    thanks
    Nancy

    February 3, 2019 at 6:09 pm #1062318
    Mike

    Hey Munford,
    To move your page down a little so it won’t be behind your mobile header, Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    @media only screen and (max-width: 767px) { 
main.template-page {
    margin-top: 80px !important; 
}
}

    Please adjust to suit, then clear your browser cache and check.

    To make your mobile header a little smaller, please try this css:

    @media only screen and (max-width: 767px) {
.responsive #top #wrap_all #header,.responsive #top #wrap_all #header span.logo img {
    height: 60px !important; 
    max-height: 60px !important;
}
.responsive .logo a {
    vertical-align: top !important; 
}
#header_main {
    border-bottom-width: 0px !important; 
}
}

    Please adjust to suit, then clear your browser cache and check.

    Best regards,
    Mike

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.