Use :first-letter in main-menu navigation

  • Resolved hartv

    (@hartv)


    5 years, 1 month ago

    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

    5 years, 1 month ago

    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.

    Thread Starter hartv

    (@hartv)

    5 years, 1 month ago

    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

    5 years, 1 month ago

    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;
    }
}
    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    5 years, 1 month ago

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

    Thread Starter hartv

    (@hartv)

    5 years, 1 month ago

    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.