Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • February 28, 2015 at 9:17 pm #403908
    cnovamacias

    Hello,

    Is there a way to make the menu bar transparent for mobile as it is for tablet? Both have mobile menu option and it looks so much better transparent than in color at first glance. Scrolling down tablet it goes purple and thats how I would like mobile to look.

    I appreciate your help!

    March 2, 2015 at 2:13 pm #404444
    Yigit

    Hey cnovamacias!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    @media only screen and (max-width: 767px) { 
#top #wrap_all .av_header_transparency, .av_header_transparency #advanced_menu_toggle { background-color: transparent; }
.responsive #top #wrap_all #header { position: absolute; }}

    Best regards,
    Yigit

    March 12, 2015 at 10:46 pm #410767
    Dandy

    @Yigit,

    with your CSS Code i get a transparent header, but it does not recognize the transparent header logo, which we can setup in the enfold setting : header->transpareny options->transpareny logo.

    Can u help me, that it shows the transpareny logo ?

    Manuel

    March 13, 2015 at 5:01 pm #411114
    Yigit

    Hi!

    Please add following code to Quick CSS as well 

    @media only screen and (max-width: 767px) {
.responsive #top .av_header_transparency.av_alternate_logo_active .logo a > img {
  opacity: 0;
}
.responsive #top .av_header_transparency .logo img.alternate {
  display: block;
}}

    Best regards,
    Yigit

    July 9, 2016 at 12:54 am #658623
    simonberg

    Hi Ygit,

    The solution works but creates two more issues.

    1. The three bars in the mobile menu do not turn transparent (white) as on the tablet.
    2. All pages that do NOT have a slider with transparent menu are cut off when viewed on mobile. (The text/image at the top of these pages fall behind the menu bar).

    Best regards
    Simon

    July 9, 2016 at 1:17 am #658625
    Josue

    Hi,

    Can you post the link to your website please?

    Regards,
    Josue

    July 9, 2016 at 1:23 am #658627
    simonberg

    Hi sure!

    This ia an example with a full screeen slider with transparent menu = Works fine on mobile!
    https://naprapathogskolan.se/utbildning/

    This is an example of a page that does NOT have a slider with transparent menu = H1 is cut off when viewed on mobile.
    https://naprapathogskolan.se/utbildning/bestall-utbildningskatalog/

    Best regards
    Simon

    • This reply was modified 8 years, 5 months ago by simonberg.
    July 12, 2016 at 3:30 am #659637
    Ismael

    Hi,

    Please add this in the Quick CSS field:

    @media only screen and (max-width: 767px) {
.html_header_top.html_header_sticky #main {
    padding-top: 88px !important;
}
}

    Best regards,
    Ismael

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