Tagged: ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • July 31, 2016 at 11:34 pm #667071
    Brad

    Hi,

    I use the transparent header a lot, but on mobile, the pancake menu is black “pancakes” on a white background with a light grey border (see attachment).

    I’d like to have the pancake menu be white “pancakes” on a transparent background with a light grey border. Is that possible in Enfold?

    Thank you!

    • This topic was modified 8 years, 4 months ago by Brad.
    August 1, 2016 at 8:02 am #667139
    Vinay

    Hey Brad,

    Adjust the margin top value to suit your design.

    @media only screen and (max-width: 767px) {
#top #wrap_all .av_header_transparency {
    background-color: transparent;
}
.responsive #top #main {
	margin-top:-119px;	
}
}

    If you have any questions please get back to us with a precise link where we can see the issue and the element in question.

    Best regards,
    Vinay

    August 1, 2016 at 9:33 am #667161
    Brad

    Hi Vinay,

    I tried that code, cleared the cache, but nothing seems to be different with regards to the transparency of the pancake menu on mobile browsers. Here are some more specifics:

    If you open Austin magician (LINK 1 in private content below) in a mobile browser in portrait mode, you’ll see the menu in the upper right as the “pancake” menu, resembling a white box with a light grey border and three horizontal lines (the pancakes) inside. For some reason, it’s not the transparent pancake menu icon at that resolution, and I’d like it to be.

    Secondly, if you open LINK 2 in a *desktop* browser, you’ll see that I’m using a fullwidth slider with the image of a spiral staircase, and that i’m using the title and caption features that allow me to overlay text on the fullwidth slider. However, if you open the same page in a mobile browser, you’ll see that fullwidth slider is pushed up underneath the transparent header further than it should be and the title and caption are difficult to read because of this. How do I fix this so the fullwidth slider image extends far below the header area (like it does on the desktop) and the title and caption are in a position below the header area where they can be read easily.

    (I made a different post about this second issue here before receiving your reply: https://kriesi.at/support/topic/fullscreen-slider-text-content-overlaps-with-header-on-mobile/)

    In the code provided in your reply, the margin is negative, which would just make it worse, but if I make the margin positive, it forces the fullwidth slider to start 119 pixels from the top, which isn’t what we want either. The fullwidth slider should start at the very top and overlaid on it will first be the transparent header (just like we see on the desktop version) and below that, the rest of the image will show and in that area the title and caption will go (similar to how it is on the desktop). Maybe the fullwidth slider need a min-height on mobile?

    Let me know if you need any more screenshots or links.

    Thanks again!

    August 4, 2016 at 1:47 pm #668566
    Yigit

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    #advanced_menu_toggle, #advanced_menu_hide {
    background: transparent!important;
    color: white!important;
    border-color: red!important;
}

    Best regards,
    Yigit

    August 9, 2016 at 8:24 pm #670520
    Brad

    Works great. Thanks!

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Can I Make the Pancake Menu Transparent’ is closed to new replies.