Mobile transparant navbar

Support
#1

Hey guys,

I have a transparent navbar for my site and in desktop view this is great. However, if I have this enabled in mobile view it’s not so nice. I want the dropdown navbar menu black on my mobile view. I’ve used this css so far:

@media (max-width: 979px) { .x-nav-wrap.mobile { background-color: #000000; padding: 5px ; } } .x-navbar.x-navbar-fixed-top { height: auto; } }

The only thing problem is the width of the dropdown navbar menu. I would like to have it full width (like my other pages). I couldn’t figure it out myself, so I hope you guys can help me!

Thanks in advance!

#2

Hi Bas,

Thank you for reaching out to us. To make the mobile navbar black for mobile devices on homepage, you can add the following code as well:

@media screen and (max-width: 979px) {
    .home .x-navbar .x-container.max.width {
        width: 100%;
    }
    .home .x-navbar  .x-brand.text {
        margin-left: 6%;
    }
    .home .x-navbar #x-btn-navbar {
        margin-right: 6%;
    }
    .home .x-navbar .x-nav-wrap.mobile {
        padding-left: 6%;
        padding-right: 6%;
    }
}

Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

#3

I did all that but it didn’t work unfortunately… Any other tricks that I can apply?

#4

Hello Bas,

I am seeing this:

Yqx9BCLgR9OpS5WXolJiWQ
Yqx9BCLgR9OpS5WXolJiWQ374×651 40.8 KB

After making your site changes and updates, always remember to clear all caches since you have installed W3 Total Cache plugin so that the code from the latest release is always in use. This will help you to avoid any potential errors.

And please clear your browser cache too. You may use private browsing mode in testing your site to make sure that you are viewing the latest codes from the updates and not the cached version in your browser.

Kindly let us know how it goes.

#5

That’s interesting. I did it again, but i keep seeing this.

Screenshot_2020-03-02-11-47-23
Screenshot_2020-03-02-11-47-23720×1440 148 KB

Thanks for the help so far

#6

Hello Bas,

I was able to replicate the issue that you have mentioned. However, the code that @nabeel provided should address that.

There might be an issue with the CSS code that you have in the Global CSS such as some CSS syntax error that is stopping the CSS code you are adding to work as expected.

To verify that, please copy all the codes that are in the Global CSS and paste it here.

It should provide some information if there are any CSS error that is causing the issue that you have to fix so that the CSS codes will work.

In case you’re still not able to get it sorted, please provide us with the admin access to your site in a Secure Note:

Hope this helps.

#7

I can’t seem to figure it out…

#8

Hello Bas,

I tried the login details you have sent but they don’t seem to work:

Log_In_‹Train__nd_travel—_WordPress
Log_In_‹Train__nd_travel—_WordPress1262×796 42.8 KB

Kindly double check.

#9

Hey , did you try it via bluehost?

#10

Hello Bas,

Thanks for including the link. I checked your code and you indeed have a CSS error that is why the code suggested didn’t work. It is from this line of code:

@media (max-width: 979px) { .x-nav-wrap.mobile { background-color: #000000; padding: 5px ; } } .x-navbar.x-navbar-fixed-top { height: auto; } }

I have already rectified it. Kindly check.

Hope this helps.

#11

Amazing as always. Thanks Jade!

The only thing now is that my logo is bigger? It pushes the navbar (and content) on mobile down?
I tried to change the logo size in the header menu but that didnt do anything

#12

Hello Bas,

Please try adding this CSS code:

@media (max-width: 480px) {
    .x-navbar .x-brand {
        width: 70%;
        display: inline-block;
        padding: 10px 0;
    }
}

Hope this helps.

#13

Yes that helped! The only thing that is happening now is that my logo jumps around if I switch between different pages. It also changes in size. I tried to adjust the logo size and alignment, but it did’nt really work

#14

Hi Bas,

Please also try adding this custom CSS:


@media(max-width:480px){
.home .x-navbar .x-container.max.width {
     width: 88%; 
}
.home .x-navbar #x-btn-navbar {
    margin-right: 0;
}

}
#15

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