• Closed
  • Thananont Aunsiripant
    Spectator
    December 10, 2015 at 8:53 am #22983

    Hi!

    This is my menu bar on screen which works perfectly.

    http://imgur.com/RfigQum

    However, when I inspect it on Mobile, the menu bar is now become like this.

    http://imgur.com/1aXkMZT

    The CSS that I use is

    ul.menu > li:after {
    content: “|”;
    font-size: 1em;
    }

    ul.menu > li:last-child:after {
    display: none;
    }

    How to remove “|” in Menu bar on Mobile

    Thank you!

    Denzel Chia
    Moderator
    Posts: 2656
    December 11, 2015 at 7:30 am #22993

    Hi,

    You introduced | in your custom css.

    ul.menu > li:after {
    content: “|”;
    font-size: 1em;
    }

    You should wrap your custom css in @media so as to prevent it from affecting your mobile.

    Media Queries for Standard Devices

    Thanks!