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..

    Entire window becomes blur after a modal is shown jQuery why?

    How can I reduce the amount of vertical space between lines of text using CSS?

    How to Replace the generic css style into empty string using C#

    How to format a button with in Form tag, html?

    How to make a sidebar that stretches to the page length?

    How to Make DD Wrap under DT When DD Content has No Spaces

    How do I remove a CSS class from one anchor and assign it to another using jquery?

    show/hide multiple text field based on radio selection html javascript

    CSS attribute selectors: how to escape newlines within attribute value?

    How do I make text and other items look like chalk without a specialized font using only HTML and CSS? [closed]

    How to fluid images when resize window?

    How to remove top / bottom margin from isotope masonry

    how can I make a frame made with css be over a div and when changing the width does not affect the content of the div, only the width of the frame?

    How Do I Remove a CSS Value

    How to set different css attributes with JQuery?

    How to align 2 content blocks horizontally in css without using s
    If you can change your markup, just one line of CSS is enough to achieve this through flexbox. Wrap both the items inside a parent container. Set display: flex to...
    Read more

    how to use namespaces in css?

    How to change TextBox class based on input

    How to set a td floating left in chrome?

    css divs display:none reseting and showing divs when function is called

    How to align navigation links after navigation menu is collapsed using bootstrap

    HTML & CSS: How to style an HR tag to have a title embedded in it

    How to toggle multiple images in jquery?

    CSS centering my slideshow in the header

    How to style this views in drupal 7 /custom content type/?

    How to remove odd bottom padding from gradient inside a button on firefox?

    How to make scrollable table's header fixed using css fixed position property?

    How do i set 100% in a div tag background?

    How to change the width of an HTML upload field with CSS?

    How to bottom center a span inside a list item