mobile navigation alignment and colors

  • Hello
    My website has 2 languages (English and Hebrew), after you enter the website moved from the MainPage to other pages ( Collections, Art for example ) I have 2 issues I would like to solve, hope you can advise regarding solutions
    1. In the Tablet & Mobile view, there is a pink underline below the menu items, I would like to change it to black color, can you please advise how to do that in English?
    2. When I am switching to “Hebrew” the “Burger Menu” stays on the left side of the screen, I would like to change it to right ( in the Hebrew pages)

    Thanks
    Sagi

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)

  • Hi, @sagibinder

    Try adding this in Dashboard – Appereance – Customize – Additional CSS in the Customizer

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

/* This part replaces pink line in pages that are NOT right-to-left */

body:not(.rtl) .main-navigation ul li a {
background-image: linear-gradient(180deg, transparent 93%, #000000 0) !important;
}

/* This part puts toggle button & menu on the right in rtl pages*/

.rtl #toggle-button { float: right !important; }
.rtl .main-navigation.open { right: 0 !important; }

/*This part puts the search tool on the left (optional) in rtl pages */
  
.rtl .site-header .nav-holder .tools { float:left !important; }

}

    You can learn how to use the Chrome Developer Tools or Firefox Developer Tools to help you see and test changes to your CSS.

    Hope this helps
    Kind regards!

    • This reply was modified 3 years, 10 months ago by Vlad T.
    • This reply was modified 3 years, 10 months ago by Vlad T. Reason: Typo

    Please test the latest version of code above. I corrected some mistakes.

    Thread Starter sagibinder

    (@sagibinder)

    Thanks, Vlad it’s working!
    But I want that both menus items will be underlined in black color, not just LTR,
    RTL too
    What should I change in your code?

    can you please advise how to do that in English?

    Glad it works! That’s funny because I actually had to find a clever way not to change it in LTR as well. I missunderstood you ??

    Just delete body:not(.rtl) from the 3rd line of code.

    Hope it works as expected now.

    Also, you should add this line too, to fix this problem:

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

.rtl .main-navigation ul li button { right:unset !important; }

}

    You can add only 2nd line above inside the @media { .... } block.

    Thread Starter sagibinder

    (@sagibinder)

    Thanks, man it’s working!

    Awesome! Happy to help!

    If your question has been answered, we would love if you would mark this topic as resolved in the sidebar. This helps our volunteers find the topics that still need attention and more people will get helped, possibly like you did. Thank you!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘mobile navigation alignment and colors’ is closed to new replies.