Styling the sub-menu.

First step would be to remove the !important declarations.

Hi Andrew, I have just left !important there for the moment as when I remove it the changes I was hoping for disappear.

The problem is that my solutions are limited because of this !important rule and I don’t think I have enough time to code those limited solutions. Without the !important rule I can explore the easiest solution for both of us.

• This reply was modified 6 years, 8 months ago by Andrew Nevins.

Yes please explore the easiest solution for both of us, it is very kind of you.

This what I have so far, but you really need to remove the important rules or I won’t be able to continue.

In the “Additional CSS” section of the dashboard add this:

/* The text in the sub-menu to be aligned directly from the beginning of the B.*/
.main-navigation ul li:hover > ul, 
.main-navigation ul li.focus > ul {
    left: 1.25em;
}

/* Remove the arrow in the sub-menu. */
.main-navigation .menu-item-has-children > a > .icon, 
.main-navigation .page_item_has_children > a > .icon {
    display: none;
}

/* “Buy Art” to stay black on hover with no pointer showing when hovering over */
.main-navigation .menu-item-has-children > a, 
.main-navigation .page_item_has_children > a {
    cursor: unset;
}

https://codex.www.ads-software.com/CSS#Custom_CSS_in_WordPress

Hi, I have removed the important rules which I used to remove the grey border around the sub-menu, to make the text and sub-menu itself smaller so it does not drop down onto the image on the Home page and to change the colour of the sub-menu text. I apologise for not explaining this earlier.
You can see now however, the B does line up because the font is bigger.

Your code worked apart from the hand hover.
It is nearly 1am in the UK where I am, if you don’t mind I will get off now as I cannot keep my eyes open and start again tomorrow.
Many thanks for your time so far.

I see. I’m in the UK too and don’t worry about staying up to fix these problems. I’m always here to help, but sleep comes first ??

Try replacing all the code I recommended with this:

/* The text in the sub-menu to be aligned directly from the beginning of the B.*/
.main-navigation ul li:hover > ul, 
.main-navigation ul li.focus > ul {
    left: 0.4em;
}

/* Remove the arrow in the sub-menu. */
.main-navigation .menu-item-has-children > a > .icon, 
.main-navigation .page_item_has_children > a > .icon {
    display: none;
}

/* “Buy Art” to stay black on hover with no pointer showing when hovering over */
.main-navigation .menu-item-has-children > a, 
.main-navigation .page_item_has_children > a {
    cursor: initial;
}

/* The sub-menu to have no border and a white background. */
.main-navigation ul ul {
    border: 0;
}

/* The sub-menu text to be black but turn red on hovering. */
#site-navigation li li > a,
#site-navigation li li.current_page_item a {
    color: #000;
}

/* The sub-menu text to be black but turn red on hovering. */
#site-navigation li li:focus > a, 
#site-navigation li li:hover > a,
#site-navigation li li a:hover, 
#site-navigation li li a:focus, 
#site-navigation li li.current_page_item a:hover,
#site-navigation li li.current-menu-item a:hover, 
#site-navigation li li.current_page_item a:focus, 
#site-navigation li li.current-menu-item a:focus {
    color: #800000;
}

/* When hovering over sub-menu a grey colour flashes up for a second, i’d like to stop this happening. */
.main-navigation li li:hover, 
.main-navigation li li.focus {
    background: none;
}

Unfortunately I always stay up late to fix problems:)

Hi Andrew, thanks for the time, effort and typing you have put into this. Unfortunately nothing much has changed. The arrow appears in the sub-menu, the text in the sub-menu turns white on hover, the sub-menu text is aligned slightly to the right of Buy Art not under the B although there are no longer any grey flashes and the grey border has gone.

The new css checker is saying “There are 44 errors which must be fixed before you can save. These are “Expected LBRACE” on many lines although they are mostly there already which is odd. When I do add an LBRACE it then says “Unexpected token”. Also it says unexpected token everytime there is > it does not like the & or ; I have removed them and no errors are detected then, but it does not work.

Just for the time being i’ve added the old code back as the sub-menu looks neater if anyone happens to look at the site.

I think our code combined may get my sub-menu how I want it to look and will play around with it tonight and let you know what happened.

Many thanks.

The arrow appears in the sub-menu, the text in the sub-menu turns white on hover, the sub-menu text is aligned slightly to the right of Buy Art not under the B although there are no longer any grey flashes and the grey border has gone.

I’m afraid I can’t replicate that. Are you sure you’ve cleared your cache?

Oh I realise by now my code is probably reverted. If you can go back to the state with my code that would be great, otherwise I can not resolve the problem with it.

The new css checker is saying “There are 44 errors which must be fixed before you can save. These are “Expected LBRACE” on many lines although they are mostly there already which is odd. When I do add an LBRACE it then says “Unexpected token”. Also it says unexpected token everytime there is > it does not like the & or ; I have removed them and no errors are detected then, but it does not work.

I checked your current CSS on this checker and it came up with 0 errors: https://csslint.net/#results – Perhaps you’ve resolved the problems.

Yes, I cleared the browser cache and have put your code back now. Should I stop playing around with it while you are checking things?

Oh sorry, i’m a bit confused, as there are errors it is saying the site might break if I publish it with your code. Therefore you cannot see what it shows on the site. What should I do.

The code I recommended does not have syntax errors, but there are about 100 lines of other code along side it in your Additional CSS section that could be causing the problem.

It’s probably best to grin and bear it and continue tweaking, as it’s not feasible to leave your code in a broken state for a long time until I respond.

I have put it back to the WordPress default, maybe this will help you.