Docs

[Lee]

Hello,

I am building a site for my work. I have done quite a bit of customizing using help on the forum with a child theme installed, but am stuck on 2 things.

#1:

I have made is so that the pill menu is displayed on any mobile device screen resolution smaller then 1025px width.

So far so good but I am having trouble resizing the height of the navbar.

I have looked in the code and found the CSS to do it (.x-navbar) and it does resize as I would like, but the menu when the pill button is pressed has no background! If I disable the height alteration it comes back so I know that it is this which is causing it, but I can not find a solution. Help please?

The CSS is:

/* mobile */
@media screen and (max-width: 1024px) {

/* height of navbar */
.x-navbar {
height: 60px;
}

/* pill menu appears */
.masthead-inline .x-btn-navbar {
display: block;
float: right;
}
.x-nav-wrap.desktop {
display: none;
}
.x-nav-wrap.mobile {
display: none;
}
.x-nav-wrap.mobile.collapse.in {
display: block;
}
} /* end mobile */

2#:

I have also altered the scroll to bottom and would like to know how to change the mouse hover colour to solid white, instead of red, like its counterpart of scroll up.

CSS for this is currently:

.x-slider-scroll-bottom {
width: 35px;
height: 35px;
font-size: 25px;
line-height: 27px;
border-width: 2px;
opacity: 0.375;
}

Thank you for your time and help.

Lee.

[Thai]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[Lee]

This reply has been marked as private.

[Thai]

Hi Lee,

Please find this CSS:

/* height of navbar */
.x-navbar {
height: 60px;
}

Then update to this:

.x-navbar-inner {
    min-height: 60px;
}

Hope it helps 🙂

[Lee]

Hi,

Thank you for getting back to me but this has not worked.

Anything else I can try?

Lee.

[Thai]

Hi Lee,

#1] Please update the provided CSS to this:

.x-navbar-inner {
    min-height: 60px !important;
}

#2] Add the following CSS:

.x-slider-scroll-bottom:hover {
    color: #fff;
    opacity: 1;
}

Let us know how it goes!

[Lee]

FANTASTIC! Thank you so much, this has been bugging me for days now.

Also Just want to say that X Theme is one of the best I have seen and used in a long time.

Lee.

[Thai]

Glad we were able to help 🙂

If you need anything else please let us know.

[Author]

Posts