Tagged: , , ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • December 12, 2014 at 7:39 am #367142
    nigellim68

    Hi

    When the browser width is narrow, the menu system auto switches to a different format suitable for mobile devices.

    It is like a drop down list type of menu.
    How do I customize this menu?

    Specifically,
    1. Remove or change the arrow image (bullet) from each menu item
    2. Because I have add a margin-left to li#menu-item-334 , it is also affecting the menu item in the mobile mode. How do I change that?

    Thanks and hope to hear from you soon.

    December 12, 2014 at 4:48 pm #367302
    Yigit

    Hi nigellim68!

    Please add following code to Quick CSS 

    #mobile-advanced li > a:before, .html_header_mobile_behavior #mobile-advanced span > a:before, #mobile-advanced .mega_menu_title:before {
display: none;
}

    Regards,
    Yigit

    December 12, 2014 at 5:03 pm #367326
    nigellim68

    Thanks, that snippet got rid of the bullet point arrows but the menu item (li#menu-item-334) still have a margin-left: 15% added to it.
    I need this margin in the desktop browser but not in the mobile browser.

    How to achieve this goal?

    December 12, 2014 at 5:07 pm #367329
    Yigit

    Hi!

    Please change following code 

    li#menu-item-334 {
margin-left: 15%;
}

    to following one

    @media only screen and (min-width: 990px) {
li#menu-item-334 {
margin-left: 15%;
}}

    Cheers!
    Yigit

    December 12, 2014 at 5:12 pm #367335
    nigellim68

    Thanks, work beautifully.

    I made a change as I am using 1400 instead of 990

    
@media only screen and (min-width: 1400px) {
li#menu-item-334 {
margin-left: 15%;
}}
    • This reply was modified 10 years ago by nigellim68.
  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Mobile Mode Menu Customisation’ is closed to new replies.