How can I get this toggled drop down menu to be open by default - rather than having to have someone click it to initialize it?


Tags: jquery,html,css

Problem :

This is where I got my template from: http://codyhouse.co/demo/mega-dropdown/index.html

How can the CSS be changed such that the menu is open by default? I've tried adding

display: visible; !important

to all the lines that are relevant to both, or either - the toggle button itself, or the menu itself - but none seem to help.



Solution :

First of all, display: visible; !important is invalid. There is no visible value of property display. Also, !important declarations are written before the semicolon, not after.

If you are trying to achieve this using CSS:

CSS:

.cd-dropdown {
  opacity: 1;
  visibility: visible !important;
}

You can also modify the HTML:

HTML:

<a class="cd-dropdown-trigger dropdown-is-active"></a>
<nav class="cd-dropdown dropdown-is-active"></nav>

Or with jQuery

jQuery:

$(document).ready(function() {
  $('.cd-dropdown-trigger').click();
});

Hope that answers your question.


    CSS Howto..

    How to ignore CSS img styling for certain sections of the website?

    How to overlap two SVG vectors without using inline SVG?

    How to remove top border for one element in a list

    Multiline content in a DIV, display only the first line, if clicked, show all and contenteditable

    HTML/CSS: How do I make right floats go to the top instead of floating at the position where they were when they were inline?

    CSS: How to override a class style with an enclosing div

    c3.js - how to show hand cursor on bar chart hover

    How to create rounded shapes with css or SVG

    How to click on and off submenu's using javascript

    How to horizontally center a header that is position:absolute

    How to tune CSS with Isotope to display top border?

    How to horizontally center absolute text?

    With html tables, using CSS, how do I get the tables next to each other?

    How to make marquee when hover in - text scroll and infinite loop, out - back to start position?

    Bootstrap dropdown div not showing in non-collapsed view

    How to make cross-browser compatibility with IE10 and IE11?

    How To Pick Desired Image From CSS Sprites In A DIV Background And Position It?

    how to center image + text in an li Element

    Using CSS, how to create a two-column grid with equal-width columns that are “only as narrow as required”?

    how to many class share 1 css method in CSS

    How to add a second border around a CSS circle

    how to make changes permanently to css elements with -moz-transform?

    How to modify CSS rules without adding style attribute?

    Why are THs bolder than TDs and how to avoid it?

    CSS: how to make a list item containing a form “submittable”?

    How to make bootstrap 3 dropdown menu working for no JS user

    How can I better regulate BootStrap's width styling from scaling down elements at specific width sizes?

    How to specify font-size for all bold text in the div?

    How can .css('display') be block, [0].hidden be false, and .is(':hidden') be true?

    How to ensure CSS :hover is applied to dynamically added element