Want to change ::marker in mobile version

  • When the mobile menu is activated, each link has an open disc because of the li and ::marker. I have not been able to find where the code is to override it in the child theme.

    It is my understanding that any CSS selector with ::name is a pseudo-class and needs to be used as part of a tag selector, ex. li::marker. I have recently run into some code that has ::marker outside the tag.

    Here is how it shows in Page View

    <li id=”menu-item-435″ class=”menu-item menu-item-type-custom menu-item-object-custom menu-item-435″>Latest Post

    Here is how it shows in the Firefox Inspector

    <li id=”menu-item-435″ class=”menu-item menu-item-type-custom menu-item-object-custom menu-item-435″>::markerLatest Post

    What is the difference?

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

Viewing 1 replies (of 1 total)
  • dongho

    (@dongho)

    Hi, I had a look also here, to reset the discs, you probably need to keep reset-list-style, that is you should probably not change the original Rowling header.php, line 170

    <ul class="mobile-menu reset-list-style" style="display: block;">

    The override you want comes from the original lines of CSS, see lines 144 – 153

    .reset-list-style,
.reset-list-style ul,
.reset-list-style ol {
 list-style:none;
 margin:0
}

    ::marker
    It’s great you’re having fun with CSS with this great theme, which allows a nice customization, and it’s the case here regarding the ::marker, but it doesn’t work everywhere see browser compatibility for ex.

    You can’t use every CSS property on a ::marker, and it is generated by Firefox, that’s why you don’t see it first in Page View.

    The site is really nice.

Viewing 1 replies (of 1 total)
  • The topic ‘Want to change ::marker in mobile version’ is closed to new replies.