Menu button (Hamburger button) on mobile

Home Forums Jevelin Theme Menu button (Hamburger button) on mobile

Home Forums Jevelin Theme Menu button (Hamburger button) on mobile

This topic contains 3 replies, has 2 voices, and was last updated by  Shufflehound Support 2 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • shilpi4
    Participant

    Hi there,

    My menu button (hamburger button) on mobile is white in color due to a dark background image on the landing/home page, however, on all other pages it gets lost since they have a white background.

    How can I toggle the color of my menu button?

    Also, how can I show the top nav bar in the responsive layout? (It shows on the desktop, but not on Mobile)

    Website: thesaltstory.com

    • This topic was modified 2 months ago by  shilpi4.

    Hi @shilpi4,

     

    I hope you are well today and thank you for your questions.

     

    How can I toggle the color of my menu button?

    You can achieve it by adding the following CSS code in the Custom CSS code option of your theme on the below path.

    Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code

     

    body:not(.home) .c-hamburger--htx:not(.is-active) span,
    body:not(.home) .c-hamburger span:before,
    body:not(.home) .c-hamburger span:after {
        background: #000 !important;
    }
    
    

     

    Also, how can I show the top nav bar in the responsive layout? (It shows on the desktop, but not on Mobile)

    You can display the topbar on mobile by using the CSS solution shared in the below topic.

     

    https://support.shufflehound.com/forums/topic/top-bar-does-not-display-2/#post-46534

     

    Best regards,
    Shufflehound team

    shilpi4
    Participant

    Thank you so much for your response. Very helpful!

    Follow up questions

    • how can I display the breadcrumb on each page (Except the home page/ landing page) without using Title Bar?
    • My drop-down menu overlaps existing content on the page, is there a clean way to handle this? (see: thesaltstory.com/recipes)
    • This reply was modified 2 months ago by  shilpi4.

    how can I display the breadcrumb on each page (Except the home page/ landing page) without using Title Bar?

    Please use below custom CSS code to hide it on the home page.

     

    #page-container header.primary-mobile {
        display: none !important;
    }

     

    My drop-down menu overlaps existing content on the page, is there a clean way to handle this?

    Do you mean on mobile when you expand dropdown clicking on the breadcrumb icon?

Viewing 4 posts - 1 through 4 (of 4 total)