Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • March 29, 2024 at 2:23 pm #1438696
    northorie

    Hi,
    is there a way to have the burger symbol for the transperent menu on homescren and a change to text when I start to scroll and the sticky header appears which will be used on all other pages?
    Can I change the width of the both menus? transperent should stay as it is and the sticky header should use the full width of the page. How can I do this?

    Best regards

    • This topic was modified 1 year, 7 months ago by northorie.
    • This topic was modified 1 year, 7 months ago by northorie.
    March 30, 2024 at 11:37 pm #1438810
    Mike

    Hey northorie,
    To have a mobile menu when the header is transparent and change to the full menu on scroll for desktop screens, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    @media only screen and (max-width: 2500px) {
  #top #header.av_header_transparency .av-main-nav > li.menu-item  {
      display: none!important;
  }
  #top #header.av_header_transparency .av-burger-menu-main {
      cursor: pointer;
      display: block!important;
  }
}

    Best regards,
    Mike

    March 31, 2024 at 1:35 pm #1438832
    northorie

    Thank you! that’s great!
    Can I adjust the width of the mobile menu?
    And the color of the burger menu icon on desktop?

    March 31, 2024 at 10:02 pm #1438857
    Mike

    Hi,
    To change the color of the burger menu icon on desktop try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    #top .av-burger-overlay li li .avia-bullet, #top .av-hamburger-inner,#top .av-hamburger-inner::before, #top .av-hamburger-inner::after {
  background-color: red !important; 
  }

    To adjust the width of the mobile menu go to Enfold Theme Options ▸ Main Menu ▸ Burger/Mobile Menu Styling ▸ Flyout Width

    Best regards,
    Mike

    April 1, 2024 at 4:12 pm #1438907
    northorie

    I meant to width of the header on desktop?
    f.e.: Moblile Header on Dektop with width 900px, on mobile default width – Normal Header on all other pages default width

    Can I have a different burger icon color on mobile and on desktop?

    April 1, 2024 at 5:50 pm #1438920
    Mike

    Hi,
    The above css changes the color of the burger icon to red, please adjust to the color you wish:
    Enfold_Support_5244.jpeg

    Best regards,
    Mike

    April 1, 2024 at 8:07 pm #1438928
    northorie

    Got it. Topic can be closed. thank you!

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Main menu: from symbol to text and width of both menus’ is closed to new replies.