Leave the mainnav menu between 767px and 1024px

  • Resolved yellowduff

    (@yellowduff)


    6 years, 11 months ago

    Hi !

    I’m trying out this Theme for a new website, and I really love it. Nevertheless, I’m struggling on something to customize the theme.

    I’m trying to leave the full screen menu (#mainnav) for screen with width > 767px. In order to do that, I’ve made the following changes :

    In the js>main.js file :

    		$(window).on('load resize', function() {
			var currMenuType = 'desktop';

			if ( matchMedia( 'only screen and (max-width: <strong>767px</strong>)' ).matches ) {
				currMenuType = 'mobile';
			}

In the style.css file :

    @media only screen and (max-width: 767px) {
    #mainnav {
    display: none;
    }}

    After reloading the page, I can still see the class #mainnav changing in #mainnav-mobi for screen with width lower than 1024. What did I forget ?

    Thanks a lot for you help ??

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter yellowduff

    (@yellowduff)

    Don’t know how to modify my previous post… Which isn’t so clear since I messed up the code section.

    To resume, I have modified :
    In the js>main.js file :

    if ( matchMedia( ‘only screen and (max-width: 767px‘ ).matches )
    {currMenuType = ‘mobile’;}

    In the style.css file :

    @media only screen and (max-width: 767px) {
    #mainnav {
    display: none;
    }}

    Thanks in advance !

    Hello @yellowduff, you probably forgot this:

    .btn-menu {
    display: block;
}

    Please check this topic:
    https://forums.athemes.com/t/hamburger-menu/8111

    Kind Regards, Roman.

    Thread Starter yellowduff

    (@yellowduff)

    Hi @romanbon. Thanks for your answer, it doesn’t solve my problem though.

    .btn-menu {
    display: block;
}

    => This is to display the 3 bar menu buttons for mobile. My problem is the Menu with the titles for larger screen which doesn’t appear between 767px and 1024px (the #mainnav which becomes #mainnav-mobi when smaller than 1024px).

    Anyone has an idea ?

    Thanks in advance!

    Hello,

    Can you please provide a link to your website?

    Kind Regards, Roman.

    Thread Starter yellowduff

    (@yellowduff)

    Hi @roman, my problem is actually solved !

    I had modify the main.js file, but I had forgotten to modify the main.min.js as well !

    Thanks for your help !

    Great! You are welcome ??

    Kind Regards, Roman.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Leave the mainnav menu between 767px and 1024px’ is closed to new replies.