Dispatch theme: Styling menu and links

Hi there,

I've checked the site and it looks completely different from your screenshot - https://share.getcloudapp.com/Wnu0e26K

Perhaps, you've already sorted this out? Let us know if you still need help w/ this. :D

Hi Elvin,
It's the same site, and the screenshots are similar as far as i can see? :-)
Your have the second menu pulled down and mine the fourth.

Sending another screenshot in case there was something wonky with the first.
https://snipboard.io/fF42SI.jpg
If you look in the menu where it says "World cyanotype day" you can see it's a white line (I have whitespace in front of it) but i'd like to remove the underline hover effect in the menu on all items if that is possible. :-)

Hi there,

Any chance you can link us to the site in question?

You can use the private information field:
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Let me know :)

Hi Leo,
Yes, no problem, it's a public site and it's live, I just forgot:
https://www.alternativephotography.com/

Did you manually add the  ? https://share.getcloudapp.com/6quYO4G0

Was this added on purpose? Instead of adding this, can you add the spacing through margin-left? It's being read as a character in a string, that's why there's a weird underline before the visible text.

Hi Elvin!
Yes, I did it manually. That's a good idea with the margin-left, but I want to remove the white underlines all together, on all menu items. And also the blue underline in the top menu.
Is there a way to do this you can think of? :-)
Thank you!

Hi Malin,

You have this CSS:
https://www.screencast.com/t/6DCTc9Em

a:hover, a:visited {
text-decoration: underline;
color:#444;
}

If you want to keep underline for all other links except menu items, then change the CSS to this:

a:not(li.menu-item a):hover, a:not(li.menu-item a):visited {
text-decoration: underline;
color:#444;
}

Let me know :)

Thank you Ying! That worked very well on the menu, but now the visited links on the first 4 is also grey on grey. I've confused myself here, which tag do i set to fff again to make the visited still white? This is the code right now:

a {
color:#330066;
text-decoration: underline;
}

a:not(li.menu-item a):hover, a:not(li.menu-item a):visited {
text-decoration: underline;
color:#444;
}

but now the visited links on the first 4 is also grey on grey.

Can you explain what the first 4 means?

Ah, sorry, I mean the first 4 posts on the front page. the links are now grey on grey.
https://www.alternativephotography.com/

I played around a bit and this seems to work:

a:not(li.menu-item a; wpsp-card a; wp-show-posts-meta a):hover, a:not(li.menu-item a; wpsp-card a; wp-show-posts-meta a):visited {
text-decoration: underline;
color:#444;
}

I've never come across the "not" in CSS before, can you tell me if this looks correct? :-)

Hi there,

that wouldn't work, as you cannot have multiple Selectors inside a :not argument.
But you can string multiple :not selectors together like so:

a:not(.selector-1):not(.selector-2):not(.selector-3):hover {
    /* Some styles here */
}

But, when i start writing that kind of CSS, i generally stop and re-think the approach.
What may work better for you is to limit the scope of the initial selector to start with.
For example:

.inside-article a {
    /* Your static styles here */
}
.inside-article a:hover,
.inside-article a:visited  {
    /* Your hover styles here */
}

This will limit the styles to only links that are in the inside-article container. This container is on the single-post and archives .
As the navigation, sidebars, header element are outside this container they won't attract those styles.

If you could explain what elements should have the styles then i could help with focus the CSS to just apply to those areas.

Hi David,
Thank you so much, you guys are very helpful.
The Dispatch theme has links that are not underlined, so I added this to fix that (It worked):

a {
color:#330066;
text-decoration: underline;
}

a:not(li.menu-item a):hover, a:not(li.menu-item a):visited {
text-decoration: underline;
color:#444;
}

But, then the menu became underlined and I added this as per suggestion above (It worked):

a:not(li.menu-item a):hover, a:not(li.menu-item a):visited {
text-decoration: underline;
color:#444;
}

But, then the first 4 posts, the visited links became grey on a grey background (they should stay white), so I added this:

a:not(li.menu-item a; wpsp-card a; wp-show-posts-meta a):hover, a:not(li.menu-item a; wpsp-card a; wp-show-posts-meta a):visited {
text-decoration: underline;
color:#444;
}

And even though it's probably not correctly written it somehow worked.
https://www.alternativephotography.com
I guess it won't work for all browsers etc if it's not correct, so if there is a better solution, please help. :-)