Hide navigation menu on mobiles

[ARCHE]

Hello,

When my website is viewed on smaller screens, the navigation menu gets shrunk. And I don’t like the appearance of it, especially when it gets clicked on. So, I would rather hide the whole menu… can you please help me with it? Thanks.

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, try by adding this to style.css of child theme 🙂

COPY CODE

.kleo-mobile-switch {
    display: none !important;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[ARCHE]

Hello,

Thank you for your reply.

It worked when I put it in the page ‘Custom CSS settings’, thanks!

But, this way I should put it in every page custom css settings? For example for every project page? Isn’t there a way to apply it only once that can be valid for ALL pages?

It didn’t work when I put it in the style.css

Thank you again…

[Laura]

Hello, add it to style.css of child theme and also to quick css at theme options, this should apply it to all pages 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[ARCHE]

Thanks, it works!

[ARCHE]

Hi @Laura,

Maybe you could help me on something additional related to custom CSS:

I have this custom css on my Front Page

COPY CODE

.sticky-wrapper .kleo-main-header {
    top: -70px !important;
    position: fixed;
}
 
.sticky-wrapper.is-sticky .kleo-main-header {
    top: 0px !important;
}

which I want it to be applied ONLY on that specific page… but somehow each Portfolio item seems to have copied this property… How could I fix this?

I repeat, the code above has been put ONLY on the Front Page custom CSS settings, and nowhere else. This is the website I am talking about.

[Laura]

Hello, if its only for the home page use .home before all codes 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[ARCHE]

Hi,

Unfortunately, .home didn’t fix it.

To explain myself better, I am attaching this screen video:
I have that code in the custom css settings ONLY of the home page, and nowhere else. Because I want it to be applied ONLY on the home page.

But somehow, this property gets copied also to each Portfolio item as you can see in the second part of the video… which I don’t want to happen.

[Laura]

Hello, this should work, replace it with your current code

COPY CODE

.home .sticky-wrapper .kleo-main-header {
    top: -70px !important;
    position: fixed;
}
 
.home .sticky-wrapper.is-sticky .kleo-main-header {
    top: 0px !important;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[ARCHE]

Hi,

Thank you for your reply.

But as you had suggested it in your previous reply, I had tried this code and replied back that it doesn’t work.

I tried it again a second time, also tried to put it in style.css and theme’s general settings custom css, but nothing changed.

[Laura]

Hello, clearing cache doesn’t work? If you delete the code do you see it still working?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[ARCHE]

Hello,

Clearing the cache didn’t work… but also, by deleting the code everywhere I can see it still working on all pages… What it could be?

[Laura]

Hello, then its the server cache, add the last code with .home and ask your hosting to clear or disable the cache 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[ARCHE]

Hello,

I asked my hosting to clear the cache, but still all the same. It’s like that code without .home at the beginning applies to ALL pages. And this occurs even if I delete the code from everywhere. What else could it be? Please help.

[Laura]

Hello, the code without .home should apply to all pages, with .home it should apply just to the homepage

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Author]

Posts