Navigation is different of pages

As I understand it, you are making changes directly to the theme’s style.css file. Don’t do this for the following reasons:
– The next time WordPress core or the theme updates, all of your code changes will be deleted;
– When you have a problem like you described with the sub-menu items, you have thousands of lines of code to go through before figuring out the problem.

First transfer all of the modifications made to the theme’s style.css file so that they’re instead inside the “Additional CSS” part of the dashboard. You can use a tool like https://diffchecker.com to find the code that is different from the original code.

1. the sub-menu hides behind the page content, and I cannot find the setting.

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

.site-header {
    z-index: 2;
}

.site-content-contain {
    z-index: 1;
}

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

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

I’ve created the Diffchecker page for you: https://www.diffchecker.com/7XdGEOhA

On the left is the original theme’s style.css code and on the right is yours.

Just copy the styles into the “Additional CSS” section of the dashboard and after you’ve done that and checked it’s working, you can revert the style.css file back to the original code.

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

Andrew, thank you for answering, and so quickly.
First, let me say that I have placed the two CSS settings into the Additional CSS and the sub-menu no longer hides behind the content. Thank you.
Second, I am NOT changing Style.css directly in the theme, I am working with a Child theme, as I said.
So I didn’t quite understand the next directive.
Could you please be more clear about what it is I am to do?
Thank you again for your help,
Vera

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

Ah ignore what I said here then:

As I understand it, you are making changes directly to the theme’s style.css file. Don’t do this for the following reasons:
– The next time WordPress core or the theme updates, all of your code changes will be deleted;
– When you have a problem like you described with the sub-menu items, you have thousands of lines of code to go through before figuring out the problem.

First transfer all of the modifications made to the theme’s style.css file so that they’re instead inside the “Additional CSS” part of the dashboard.

However, you do still have 3500 lines of code in your Child Theme style.css file.

Can you track what you’ve changed? If so, try reverting the CSS to explore whether any of those modifications are causing the problems you see with the submenu.

Andrew,
I can always track what I change, that is not the problem.
And the navigation lines are really not 3500, so that is not the problem, either.
It is obvious that the change I made for menu with the radius affects both parent and child, and I just don’t see how to separate them. Somehow what I have tried doesn’t work.
What is the correct code for the child menu background in this theme?
Thank you,
Vera

It is a problem for us because we can’t see what you’ve changed and what is causing the problem. It’s probably really clear for you, but for us it’s a nightmare to support. Can you provide the CSS that is causing the problem and step through what you intended?

Andrew,
I think this is the culprit:

.navigation-top .current-menu-parent a {
    background-color:#983620;
    border-top-left-radius:10%;
    border-top-right-radius:10%;
    color:#ffffff;
}

I wanted to have the parent of an active child also be coored red.
However, when I use this – all children AND the parent are colored red. When I don’t – all are yellow.
How do I make it right?
Vera

I wanted to have the parent of an active child also be coored red.

Ah, you need to use the greater than symbol to target direct descendants of the menu. Like this:

.navigation-top .current-menu-parent > a {
    background-color:#983620;
    border-top-left-radius:10%;
    border-top-right-radius:10%;
    color:#ffffff;
}

Does that do what you want?

Andrew,
Yes, thank you! It solves this problem.
Now I need to solve the “current child item” round corners – it takes the setting from here:

navigation-top .current-menu-item > a,
.navigation-top .current_page_item > a {
/*	color: #767676;*/
	color: #ffffff;
/*  adding*/	
    background-color:#983620;
    border-top-left-radius:10%;
    border-top-right-radius:10%;
}

It makes the corners round for the current parent link – but also for the child current link, and I want to separate the child current link. What is the code for that?
BTW, it’s strange, but I only got the notification of your answer minutes ago.
Thank you for your help,
Vera

• This reply was modified 6 years, 7 months ago by beitsiach.

Try this instead:

.main-navigation li li.current_page_item a, 
.main-navigation li li.current-menu-item a {
    color: #ffffff;
    background-color:pink;
    border-top-left-radius:10%;
    border-top-right-radius:10%;
}

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

Andrew,
Thank you, that’s perfect.
Last question on this:
There are going to be quite a few child links. Is it possible to make them horizontal, like in Max menu, without adding the plugin?
Thank you, again.
Vera

Yes, try this:

@media screen and (min-width: 768px ) {
    .main-navigation li {
        position: static;
    }

    .main-navigation ul li:hover > ul, 
    .main-navigation ul li.focus > ul {
        background: #fbea7b;
        display: flex;
        flex-wrap: wrap;
        left: 0;
        right: 0;
    }
    .main-navigation ul li.menu-item-has-children.focus:before, 
    .main-navigation ul li.menu-item-has-children:hover:before, 
    .main-navigation ul li.menu-item-has-children.focus:after, 
    .main-navigation ul li.menu-item-has-children:hover:after, 
    .main-navigation ul li.page_item_has_children.focus:before, 
    .main-navigation ul li.page_item_has_children:hover:before, 
    .main-navigation ul li.page_item_has_children.focus:after, 
    .main-navigation ul li.page_item_has_children:hover:after {
        display: none;
    }
}

Andrew,
Perfect, thank you!
I don’t know your religious affiliation, but it’s second holiday of Passover to begin in an hour or so. So – have a happy Passover and Shabbat, if relevant, and just a good weekend, if not. ??
Many thanks for the assistance.
Vera