Support » Theme: Twenty Nineteen » Use :first-letter in main-menu navigation

  • Resolved hartv

    (@hartv)


    Hello,

    I tried to modify the theme with my vestigal CSS skills and change the first-letter color in the navigation menu. Somehow I can not change the first letter color in main menu li and a elements.

    So far i tried:

    /* Menu */
    .main-navigation .main-menu a,
    .main-navigation .main-menu li a {
    	color: #bbbbbb;
    }
    
    .main-navigation .main-menu a:hover,
    .main-navigation .main-menu li a:hover {
    	color: #ffffff;
    	text-decoration: none;
    }
    
    .main-navigation .main-menu a:first-letter,
    .main-navigation .main-menu li:first-letter {
    	color: #ea4023;
    }

    The code above only affects the drop down element but not all elements in menu.

    Any help is appreciated

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

Viewing 5 replies - 1 through 5 (of 5 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Hello, I’m not sure what you mean by the li and a elements. Can you clarify? When I looked at your site just now I didn’t see the issue.

    • This reply was modified 10 months, 2 weeks ago by Andrew Nevins.

    Sure. I basically wanted to change all first-letter-colors of the whole navigation menue on top using the custom CSS option. The html of the navigation looks something like this:

    <nav id="site-navigation" class="main-navigation" aria-label="Top Menu">
    <div class="menu-primary-en-container">
    <ul ... class="main-menu">
    <li ... class="menu-item ..."><a href=...>Main 1</a></li>
    <li ... class="menu-item ..."><a href=...>Main 2</a></li>
    <li ... class="menu-item ..."><a href=... ...>Submenue</a> <button ...>
    <ul class="sub-menu">
    	<li ... ><button...></li>
    	<li ... class="menu-item ..."><a href=...>Sub 1</a></li>
    	<li ... class="menu-item ..."><a href=...>Sub 2</a></li>
    	<li ... class="menu-item ..."><a href=...>Sub 3</a></li>
    </ul>

    So I tried to change the first-letter colors of those elements with CSS. If I use something like

    .menu-item li:first-letter {
    	color: #ea4023;
    }

    It only affects the text Submenue and Sub 1, Sub 2, Sub 3 but not Main 1 and Main 2. I also tried various other classes like .main-menu but results are always the same. It is easy to modify this on previous, official wordpress themes but this time I’m stuck.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    It’s something to do with the list item being an inline element. Try using flex:

    
    @media screen and (min-width: 768px) {
        .main-navigation .main-menu {
            display: flex;
        }
    }
    
    • This reply was modified 10 months, 2 weeks ago by Andrew Nevins.
    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I see you’re no longer using Twenty Nineteen so I’ll mark this resolved

    Yes, I’m still experimenting a bit.

    Your solution works by the way. Thank you a lot for your help.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Use :first-letter in main-menu navigation’ is closed to new replies.