Get rid of mobile dropdown menu

[Vay]

hi there,
I would like to get rid of this Hamburger menu. I know it appears because the menu is responsiv but I would like to have my “normal” usual menu when I have the mobile phone view.

Thanks in advance

[thai]

Hi There,

To show the desktop menu on the mobile version, please add this custom CSS under Theme Options > CSS:

@media (max-width: 979px){
    a#x-btn-navbar,
    .x-nav-wrap.mobile {
        display: none;
    }
    .x-nav-wrap.desktop {
        display: block;
    }
}
/* the font size of desktop menu is too big, we should add this also to reduce the font size on mobile version */
@media (max-width: 480px){
    .x-navbar .desktop .x-nav > li > a {
        font-size: 14px;
    }
}

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

Hope that helps and thank you for understanding.

[Vay]

Thank you it helped

But i have another question.
The navbar position should be fixed. From 979px down it doesnt work and from 979px up it works. Mabye it has something to do with the new CSS Code which I added. How can I make the menu have the position fixed by all devices.

I tried to add:
.x-navbar{
position: fixed;
}

I wanted to upload a picture of how my menu looks like but somehow it didn’t work. In any case my code which I added didn’t really work.
Hope you can help me again

[thai]

Hi There,

The navbar position isn’t fixed from 979px and below by default.

To make it fixed under 979px, please add this custom CSS as well:

@media (max-width: 979px){
     .x-navbar.x-navbar-fixed-top {
         position: fixed;
     }
}

Let us know how it goes!

[Vay]

Perfect, it worked. Thanks a lot

[nabeel]

Hi again,

We’re glad it worked, 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!