Home/ Questions/Q 8649661
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T13:36:59+00:00

I’m reworking a WHMCS menu to be responsive and touch sensitive. Everything is fine

  • 0

I’m reworking a WHMCS menu to be responsive and touch sensitive. Everything is fine except for one thing. I can’t get the proper elements to display/toggle properly.

What the jQuery script does is add “open” class to parent element onclick. So 

<div id="menu-icon"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu</a></div>

Becomes:

<div id="menu-icon" class="open"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu</a></div>

When the “Menu” link is clicked.

I need the “#nav” to “display:none” by default, and “display:block” when Menu is clicked. I can’t quite capture it via CSS.

My HTML

<nav id="nav-wrap">
<div id="menu-icon"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu</a></div>
<ul id="nav">

My CSS

#nav-wrap #nav {
    display: none;
}
#nav-wrap #menu-icon.open #nav {
    display: block;
}

With the code above, I can hide the #nav by default, but that’s it. Any pointers on how to capture #nav?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Boss, there is fundamental mistake you have done.

    You have given this code:

    <nav id="nav-wrap">
    <div id="menu-icon">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu</a>
    </div>
    <ul id="nav">​

    See, the #nav doesn’t come under #menu-icon. Change the code to:

    <nav id="nav-wrap">
    <div id="menu-icon">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu</a>
        <ul id="nav">​
    </div>

    And it works!

    Demo here: http://jsfiddle.net/qqbUY/

    Screenshot

    enter image description here

    • 0