Modify Menu

Hi there,

1. as the underline is set to the .inside-navigation, you can move its left and right padding to its parent using this CSS:

#site-navigation .inside-navigation {
    padding-left: 0;
    padding-right: 0;
}

#site-navigation {
    padding-left: 20px;
    padding-right: 20px;
}

2. if you edit the Header element, on the Site Header tab you can activate Navigation colors and change its background there:

https://docs.generatepress.com/article/header-element-overview/#site-header

This will apply just to the pages where the header element is set.

3. Add this CSS:

#site-navigation ul ul {
    width: 300px;
    text-align: center;
}
#site-navigation ul ul > li a {
    border-bottom: 1px solid #fff;;
}

Thank you!

but there is one problem.
The background hover on the menu is supposed to be full size on the header.
So I guess I need to remove the padding on the navigation and give it to the main menu maybe..?
but then the border between menu will get bigger. I want the same size border between menu.

Is there a way to make this?

Could you share a mockup of what you need, as i don't quite understand.

I just changed the padding and the size of background hover is fully stretched on the header.
However, is there a way to reduce the size of border between menu?

I want the same length with text.

Do you want something like this？
https://www.screencast.com/t/QseziHIxv

If so, try this:

.main-navigation .main-nav > ul > li > a {
    line-height: 1em;
    padding: 0;
}

.main-navigation .main-nav > ul > li {
    padding-top: 20px;
    padding-bottom: 20px;
}

It doesn't seem to work.

When you see the page, I don't want to change anything on the header.
All I want to change is the size of background hover effect.
I want the background hover effect to be stretched fully on the header.

Hi Jusung,

To clarify, are you referring to something like this?: https://share.getcloudapp.com/DOukyjOv

If so, try adding this CSS:

.header-wrap:hover {
    background-color: #1abc9c;
}

.header-wrap {
    transition: background-color .3s ease-in;
}

If not, can you explain it a bit more?

I think this is complicated to explain..

you can see About | Service | Portfolio | Contact

I want to make the background hover effect only on these menu.
However, the background hover effect is not fully stretched vertically on the header.

It is cuz I have given the padding top and bottom on the header.

So, I guess I need to remove the padding on the header and add the padding on the menu maybe.
After that, I need to make the border between menu again cuz the border would be longer than what I want.

Can you provide a sketch of what you're trying to achieve? Perhaps we'll be able to understand it better with that.

I just uploaded it.

Can you see the picture?

Can you try adding this instead?:

.header-wrap :is(.inside-navigation.grid-container,nav) {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

.header-wrap .main-nav > ul > li > a {
    padding-top: 8px;
    padding-bottom: 8px;
}

As for the border, can you first remove the code you have for that?

Now you can see the menu and the background hover effect.

I just want to add border between menu.
LIke this

About | Service | Portfolio | Blog | Contact
But the border shouldn't be long. I wanna add short border.

Try adding this CSS:

.main-navigation .main-nav > ul > li:not(:first-child):after {
    content: "";
    height: 20px;
    width: 1px;
    background-color: white;
    position: absolute;
    top: calc(50% - 10px);
}

.main-navigation .main-nav > ul > li {
    position: relative;
}

Thank you Ying!.
It works very well!!