Docs

[stephenw8010]

Hi,

I am trying to get my site to look like this one: http://catch23.piexec.com/

Logo and background at the top…

then I want my menu to be slim with the highlight bars on hover

[stephenw8010]

This reply has been marked as private.

[Lely]

Hi There,

Thank you for the credentials.
I can see that you have added this for the background:

.x-logobar {
    background: url(https://stevewarren.solutions/wp-content/uploads/2016/10/caged-youtube-channel-art.jpg) no-repeat center center;
}

But then you have this custom CSS that hides the logo:

    .x-logobar {
       display: none !important;
       visibility: hidden !important;
    }

Please remove it.
To reduce the height of the menu, please go to Appearance > Header > Navbar Top Height (px): Reduce 120px.
For the highlight bars on hover, please try adding this custom CSS on Appearance > Customize > Custom > Edit Global CSS:

.x-navbar .desktop .x-nav>li{
    border-top: 2px solid transparent;
}
.x-navbar .desktop .x-nav>li:hover, .x-navbar .desktop .x-nav>li.current_menu_item {
    border-top: 2px solid red; /*Adjust this accordingly*/
}

Hope this helps.

[Christopher]

Hi there,

Please find and remove following code:

@media (min-width: 980px){
.x-logobar {
    display: none !important;
    visibility: hidden !important;
}
}

Please navigate to Customize -> Header and reduce ‘Navbar Top Height’ to 60px.
Reduce ‘Navbar Top Link Alignment’ to 25px.

Add following codes :

.x-navbar .desktop .x-nav>li>a:hover>span {
    border-color: transparent;
}
.x-navbar .desktop .x-nav>li>a:hover {
    box-shadow: 0px -3px 0px 0px #ffd204;
}

Hope it helps.

[Author]

Posts