Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • December 21, 2018 at 11:48 am #1048120
    check-t

    Hi Team,

    i used the following Quick CSS from your documentation to make the Header behave exactly as in the Desktop version, but with burger icon menu:

    /* Hide Topbar in mobile */
    @media only screen and (max-width: 767px) {
    #header_meta {
    display:none;
    }
    /* Sticky header on mobile */
    @media only screen and (max-width: 767px) {
    .responsive #top #main {
    /* Margin top value should be equal to header height*/
    margin-top: 0px;
    }
    .responsive #top #wrap_all #header {
    position: fixed;
    }
    }

    /* Transparent header on mobile */
    @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;
    }}

    Problems with this CSS:

    1. The Logo is not used in the transparent version on Mobile (white), there’s alway the blue version in contrast to the desktop behaviour. The burger icon should also be wide on transparent background.

    2. When the sticky mobile Menu shrinks, the burger icon is no more middle-aligned to the logo anymore

    Is there an easy way to make the behaviour consistent for desktop and mobile?
    Thank you!!

    December 26, 2018 at 3:23 am #1049050
    Ismael

    Hey check-t,

    Thank you for using Enfold.

    Add this code inside the css media query.

    .header-scrolled .av-burger-menu-main.menu-item-avia-special {
    top: 20px;
}

    Best regards,
    Ismael

    January 2, 2019 at 1:46 pm #1049255
    check-t

    Happy new year Ismael!

    Thank you, this solved issue #2.
    “When the sticky mobile Menu shrinks, the burger icon is no more middle-aligned to the logo anymore”

    But we still have the issue #1
    1. The Logo is not used in the transparent version on Mobile (white), there’s alway the blue version in contrast to the desktop behaviour. The burger icon should also be wide on transparent background.

    Do you know a solution to use the transparent version of the logo similar to the desktop behaviour?

    regards
    Tobias

    January 2, 2019 at 3:42 pm #1049282
    Vinay

    Hi,

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

    CSS Snippet:

    
/* CSS - Transparent header logo on mobile */

@media only screen and (max-width: 767px) {

#top #wrap_all .av_header_transparency .logo a img {
visibility: hidden;
}

#top #wrap_all .av_header_transparency .logo a {  
  background: url(https://your.site/image.png) no-repeat;
  background-size: 50%;
  background-position: 0 50%;
}
}

    Best regards,
    Vinay

    • This reply was modified 5 years, 10 months ago by Rikard.
    January 3, 2019 at 2:55 pm #1049610
    check-t

    Perfect! It works. But please anonymize the Logo URL

    Big thank you and Happy new Year!

    January 4, 2019 at 6:19 am #1049823
    Rikard

    Hi,

    Great, glad you got it working. I’ve removed the URL to the image on your site.

    Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

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