Mobile Dropdown Menu

Support
#1

Our mobile drop-down menu version needs a transparent dark blue background, instead of a light gray background, with contrasting light color text.

Example snippet, not sure if this is the correct reference but this is partially what we have in our customized css field:

.x-navbar-wrap .x-navbar:not(.x-navbar-fixed-top) {
background: transparent !important;
}
.x-navbar-wrap .x-navbar { background: rgba(10, 56, 96, 0.82) !important; }

and in simple css field:

.x-topbar, .x-navbar-wrap {background: transparent;}

h2.h-entry-cover-content {
color: #fff;
font-size: 14px;
left: 0;
letter-spacing: 0;
line-height: 1.5em;
margin: 0;
opacity: 0;
padding: 1.5em;
position: absolute;
right: 0;
text-transform: uppercase;
top: calc(100% - 13.3em);
transition: all 0.615s cubic-bezier(0.19, 1, 0.22, 1) 0s;
}
.x-iso-container-portfolio article a.entry-cover:hover .h-entry-cover-content {
opacity: 1;
}

.x-nav-wrap.mobile.collapse.in {
display: block;
margin: 0 -16px;
}
.x-navbar .mobile .x-nav {
margin: 9px 0;
}
.x-navbar .x-nav-wrap.mobile.collapse.in .x-nav li > a {
background-color: rgba(26, 46, 90, 0.8);
color:#888888 !important;
margin: 0;
}
.x-navbar .x-nav-wrap.mobile.collapse.in .x-nav li > a:hover {
color: #fff !important;
}

#2

Hi There,

This issue happens because the navbar has been set the fixed height 123px from the theme option. To fix this issue, please find this custom CSS:

.x-navbar .mobile .x-nav li>a {
    color: #06122a !important;
}

And change to this:

.x-navbar .mobile .x-nav li>a {
        color: #fff !important;
}

After that add this custom CSS:

@media (max-width: 979px){
    .x-navbar {
        height: auto;
    }
}

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

Hope this helps!

#3

We are having difficulty locating this snippet to replace:

.x-navbar .mobile .x-nav li>a {
    color: #06122a !important;
}

Just to be clear we need to get the mobile dropdown to match the styling of the desktop version.

We also found this old thread regarding the same topic, would this still be valid for our purposes?

Thanks!

#4

Hi @murraymillion

It’s just right there in (Theme Options > CSS):

Remove it, then add this snippet:

.x-navbar .mobile .x-nav {
    background-color: #1a2e5a;
    opacity: 0.85;
}

Then you will get the same look as the desktop menu.

Thanks.

1 Like
#5

Thank you sir! All set :slight_smile:

#6

You’re welcome. Glad we could help.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.