Modify Menu – GeneratePress

This topic has 15 replies, 4 voices, and was last updated 3 years, 3 months ago by Ying.

Viewing 15 posts - 1 through 15 (of 16 total)

1 2 →

Author

Posts
January 28, 2023 at 5:10 am #2511880

Jusung

Hello.

1.
When you see the main menu on the header, is there a way to put the underline and menu in the same length? the underline is longer than menu.

2.
Also, I wanna add background hover when the mouse is on the menu.

3.
On the submenu of Service, I wanna increase the width of sub menu and put the letters in the center.
I also wanna add an underline on the submenu.

Could you help me with this?

January 28, 2023 at 5:22 am #2511893
David
Staff
Customer Support
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;;
}
```
January 28, 2023 at 6:01 am #2511921

Jusung

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?

January 28, 2023 at 7:27 am #2511972

David
Staff
Customer Support

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

January 28, 2023 at 8:01 am #2512146

Jusung

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.

January 28, 2023 at 12:39 pm #2512346
Ying
Staff
Customer Support
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;
}
```
January 30, 2023 at 4:28 pm #2514800

Jusung

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.

January 30, 2023 at 5:49 pm #2514862
Fernando
Customer Support
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?
January 30, 2023 at 6:37 pm #2514890

Jusung

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.

January 30, 2023 at 6:42 pm #2514893

Fernando
Customer Support

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

January 30, 2023 at 7:42 pm #2514932

Jusung

I just uploaded it.

Can you see the picture?

January 30, 2023 at 8:23 pm #2514951
Fernando
Customer Support
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?
January 31, 2023 at 3:44 am #2515313

Jusung

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.

January 31, 2023 at 10:48 am #2515953
Ying
Staff
Customer Support
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;
}
```
January 31, 2023 at 4:36 pm #2516430

Jusung

Thank you Ying!.
It works very well!!
Author

Posts