Force mobile menu?

Hey,
In Appearance > Menus do not enable a primary navigation menu, just mobile navigation. Then add this to your custom css box in Theme Options > Advanced Settings:

#mobile-nav-trigger {
    display: block !important;
}

Does that work for you?

Hannah

Hey Hannah!

Thank you very, very much! Alright, that does force the mobile menu.
Is there a way to display only the ‘hamburger’ and not the ‘menu’ label in front of it…?
This already helps a lot though!

Kindest regards,
May

You can remove the label with this css:

.nav-trigger-case .kad-menu-name {
    display: none;
}

Just paste that into your custom css box in Theme Options > Advanced Settings.
Hope it helps!

Hannah

Hello Hannah,

Thank you for that try, but unfortunately that seems to have broken the code ?? The white background still appears but the menu no longer opens.

While I’m shamelessly making you ponder my problems with the code, do you perhaps have a way to center the burger on the page?

Thank you very much for your help!

Kindest regards,
May

Ok, try adding this instead:

#kad-mobile-nav {
    display: block;
}
span.kad-menu-name {
    display: none !important;
}

Does that work for you?

Hannah

Hello Hannah,

That seems to remove the menu completely, I fear, including the burger…

Kindest regards,
May

Hmm, can you post a link?

Hannah

Hello Hannah,

My apologies for the late reply. I had to ask permission to launch the site to show you, which I have not gotten (they are currently displaying a ‘coming soon’ page while they await the big reveal). What I have been given permission for, however, is screenshots. Please note that none of the options you have provided so far have resulted in a working menu; they are non-functional design objects at the moment…

This is the website now, with the PC menu
This is the result for the first solution (post 8240140)
This is the result for the second solution (post 8242166)
This is the result for the third solution (post 8242530)

Thank you for any help you might be able to provide!

Kindest regards,
May

Are you sure the last bit ins’t working? Try changing your menu color in Theme Options > Menu Settings to ensure it’s not just blending in.

Hannah

I am afraid not…

Ok, sorry! I’ve made this confusing. The first bit of css wasn’t supposed to be removed. So remove what you have and use all this:

#mobile-nav-trigger {
    display: block !important;
}
#kad-mobile-nav {
    display: block;
}
span.kad-menu-name {
    display: none !important;
}
.nav-trigger .nav-trigger-case {
    width: 55px;
}

I think that will work:) Let me know if not!

Hannah

It works! Hannah, you are my hero!! Thank you so very much!

Now I have one more tiiiiny question: can it be centered…?

Kindest regards,
May

Try removing the above and adding this:

#mobile-nav-trigger {
    display: block !important;
}
#kad-mobile-nav {
    display: block;
}
span.kad-menu-name {
    display: none !important;
}
.nav-trigger .nav-trigger-case {
    width: 100%;
}
.nav-trigger-case .kad-navbtn {
    float: none;
}

Does that work for you?

Hannah

Ah, I see what you did! Is there a way to just have the small, 5% square centered, though? This is rather…. overwhelming XD

Thank you, really, for your efforts!

Kindest regards,
May

• This reply was modified 8 years, 1 month ago by mrtextdesign.

Try also adding this:

#mobile-nav-trigger {
    width: 50%;
}
.nav-trigger .nav-trigger-case {
    width: auto;
}

Is that what you’re thinking?

Hannah