Header | PenciDesign Support

PenciDesign Supporter replied

3 years ago

Staff Reply

Hi,

1. Please add the following CSS to your site:

#navigation .menu > li > a:hover,
#navigation .menu li.current-menu-item > a,
#navigation .menu > li.current_page_item > a,
#navigation .menu > li:hover > a,
#navigation .menu > li.current-menu-ancestor > a,
#navigation .menu > li.current-menu-item > a,
#navigation .menu .sub-menu li a:hover,
#navigation .menu .sub-menu li.current-menu-item > a,
#navigation .sub-menu li:hover > a {     transition: 0.3s all ease-in-out; }

2. You can change the header hover color by adding the following CSS code:

#navigation:hover {
    background: #000;
    transition: 0.3s all ease-in-out;
}

3. Navigate to Appearance > Customize > Logo & Header > Logo: change the logo size at:

- Set A Max Width for Logo

- Set A Height for Logo Image

4. Add the following CSS code to your site:

.is-sticky #navigation {
    background: transparent;
    transition: 0.3s all ease-in-out;
}

Regards,
PenciDesign.

Lordexeros started the conversation

3 years ago

Conversation Start

Hello,
I have 4 questions regarding my website.
First, I tried this CSS code to modify my header a bit, but the offset and the thickness happened with a slight delay. How can you make it works?

#navigation .menu > li > a:hover, #navigation .menu li.current-menu-item > a, #navigation .menu > li.current_page_item > a, #navigation .menu > li:hover > a, #navigation .menu > li.current-menu-ancestor > a, #navigation .menu > li.current-menu-item > a, #navigation .menu .sub-menu li a:hover, #navigation .menu .sub-menu li.current-menu-item > a, #navigation .sub-menu li:hover > a {
text-decoration: underline;
text-underline-offset: 3px;
text-underline-thickness 3px;
}

Another question, I tried to do something similar as the header from Uber (https://www.uber.com/de/en/), in which the color background changes when we move on the header with the mouse. When I tried, I could not achieve the same because it took the whole size of the header and I was not able to add a space between the upper/lower side of the header and the background change. Also, it was not possible to have it aligned with the other part (the inactive part) of the header. It does not need to be 100% the same, but something similar would be nice. Maybe you have already helped someone with something similar.

I tried hundreds of things but I wasn't able to find the mistake. Here is what I used:

Third question:
How can I change the size of the logo on the desktop and/or the mobile version of my website?

Four question:
How can I make the sticky menu on both desktop and mobile slightly transparent?

Thanks a lot for your help. This would be amazing. If it's not possible I will try something easier.

Kind regards,
David Gotti