Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1048120

    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!!

    #1049050

    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

    #1049255

    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

    #1049282

    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, 11 months ago by Rikard.
    #1049610

    Perfect! It works. But please anonymize the Logo URL

    Big thank you and Happy new Year!

    #1049823

    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

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