Menu customizations

[FerryTimmer]

Hi there!

I´ve got a few customization questions which I can´t figure out by myself… Hope you can help me out

• I’ve got an image in my topbar which I want to have responsive. At the moment it isn’t responsive.
• I want to have less vertical space between my sub-pages in my menu.
• I want to underline the sub-pages on a mouse-over/mouse-hover
• And lastly I’ve got a few pages in my menu which aren’t pages, but only serve as a sort of category for the pages below. Now when I have a mouse-over they appear clickable, but instead I want them to stay the default dark blue color as they are now when inactive.

Hope you can help me

Best regards

[nabeel]

Hi there,

Thanks for writing around!

• Please replace your topbar code with the following code:

.x-topbar {
    background: url(http://www.studio544-1.nl/wp-content/uploads/2018/05/Kleurenbalk2.jpg) no-repeat;
    width: 100%;
    height: auto;
    background-size: contain;
}

• To reduce the vertical space, add the following code:

.desktop .sub-menu {
    padding: 0 15px !important;
}
.desktop .sub-menu li>a {
    padding: 0 !important;
}

• To add underline on hover, please make use of the following code:

.desktop .sub-menu li>a:hover {
    text-decoration: underline;
}

• To remove the hover effect from custom menu items, use this code:

.menu-item-type-custom:hover > a {
    color: #25375e !important;
    cursor: default;
}
.menu-item-type-custom:hover > a span {
    box-shadow: none !important;
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Cheers!

[FerryTimmer]

Thank you!!!
Everything works great! I will have a look at the tips you sent.

Best regards!

[rad]

You’re most welcome and glad we could help you