How to add small yellow circle to active and hover navigation bar

how is that question related to WordPress?

what theme are you using?
link to your site?

https://codex.www.ads-software.com/Forum_Welcome#Include_as_Much_Information_as_Possible

Sorry, im using the Sobe Theme and my website is https://lawthatworks.com/site/services/

I would if it possible I would like to use the :before tag

I am closing your other post, https://www.ads-software.com/support/topic/add-circle-to-navigational-bar?replies=1

Please do not double post.

If you’re not using a Child Theme, and if the theme doesn’t have a designated section of the dashboard for CSS modifications then install this Custom CSS Manager plugin https://www.ads-software.com/plugins/custom-css-manager-plugin

Then use its “CSS Code” section of the dashboard to hold your CSS modifications:

Alternatively use your Child Theme style.css file to hold your CSS modifications:

.nav-menu > li > a {
    padding-left: 30px;
    position: relative;
}

.nav-menu > li > a:hover:before {
    background: #FFFF00;
    border: 1.5px solid #000;
    border-radius: 12px;
    color: white;
    content: "";
    height: 20px;
    left: 0;
    line-height: 20px;
    position: absolute;
    right: 0;
    text-align: center;
    width: 20px;
}

didnt seem to work… I am using a child theme. I tried adding the code but nothing worked. Basically I want this look (https://jsfiddle.net/QCVjr/1/) next to when a link is active

Odd to see 1000+ lines of code in your Child Theme style.css file, but I still can’t find the code I recommended (above) there: https://lawthatworks.com/site/wp-content/themes/sobe-child/style.css?ver=4.2.1

try to add the code “at the very bottom” of your style.css file.

I had initially deleted the code and just re-added it so you can see that its at the bottom of the .css file.

On lines 2479-2484 of your child theme’s stylesheet, in the

.page .main-navigation {
    float: center;
    margin-top: 1em;
    margin-bottom: 1.5em;
    width: 100%;
    max-width: 100%;

section, you’ve forgotten the closing bracket for that section, which is causing parsing errors down the rest of your stylesheet. Adding the closing bracket causes the circle to appear for me.

You guys are awesome, now how would I remove it when it goes to the sub pages? I just want it to appear on the main nav, and when an active link is clicked the dot stays. and so it doesnt display on my homepage.

Any suggestions would be great… ??

Perhaps something like this?

.page .nav-menu li.current-menu-item:before {
    background: #FFFF00;
    border: 1.5px solid #000;
    border-radius: 12px;
    color: white;
    content: "";
    height: 20px;
    left: 0;
    line-height: 20px;
    position: absolute;
    right: 0;
    text-align: center;
    width: 20px;
}