1

I'm currently doing some work on our new website, and I have water up to my chest. :)

I'm trying to create a top navigation bar (dropdown) based on entries in CraftCSM to create the menu. I'm thinking only to have one level in the dropdown menus.

This is what I have so far. I've also attached the css for this, cause it might have somthing to do with that one too.

Both menus appear at the same time, and only one of the dropdowns appear. Should be several more.

Dropdown Menu

Thanks Regards a "Total Craft newbie"

<section>
        <div class="topnav">
            <div class="container">
                <nav class="menu">
                    {% set menu = craft.entries.section('menu') %}
                    <ul>

                        <div class="dropdown">
                            {% nav link in menu %}


                            <li>
                                <div class="dropdown-content">
                                    {% if link.relatedEntry|length %}

                                    <a href="{{ link.relatedEntry[0].url }}" class="dropdown-content">{{ link.title }}</a> {% else %}
                                    <a href="{{ link.customURL }}" class="dropdown-content">{{ link.title }}</a> {% endif %} {% ifchildren %}

                                    <ul>
                                        <div class="dropdown-content">
                                            {% children %}
                                        </div>
                                    </ul>

                                    {% endifchildren %}
                                </div>
                            </li>
                            {% endnav %}
                        </div>
                    </ul>
                </nav>
            </div>
        </div>
    </section>

CSS

.topnav {
    background-color: rgba(40,168,221,1);
    height: 50px;
    font-family: 'Titillium Web', sans-serif;
    position: fixed;
    width: 100%;
    z-index: 4;
}

.topnav .menu {
    float: left;
    font-size: 12px;
}

.topnav .menu ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

.topnav .menu ul li {
    float: left;
}

.topnav .title {
    color: white;
    line-height: 50px;
    float: left;
    font-size: 15px;
    font-weight: bold;
}

.topnav .menu ul li a {
    text-transform: uppercase;
    margin-left: 15px;
    margin-right: 15px;
    padding-top: 15px;
    padding-bottom: 2px;
    text-decoration: none;
    color: white;
    font-size: 13px;
    line-height: 20px;
    display: inline-block;
}

.topnav .menu ul li a:hover {
    border-bottom: solid 3px #ffffff;
}

.topnav .menu ul li a:last-of-type {
    padding-right: 0px;
}

.topnav .menu .dropbtn {
    background-color: rgba(40,168,221,1);
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
}

.topnav .menu .dropdown ul li a {
    position: relative;
    display: inline-block;
    float: left;
}

.topnav .menu .dropdown:hover ul li a {
    border-bottom: solid 3px #ffffff;
}

.topnav .menu .dropdown:last-of-type ul li a {
    padding-right: 0px;
}
.topnav .menu .dropdown-content ul li a{
    display: none;
    position: absolute;
    background-color: rgba(40,168,221,1);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Show the dropdown menu on hover */
.topnav .menu .dropdown:hover .dropdown-content ul li a{
    display: block;
  • Your use of the section element here is not correct, as there is no heading element, it would be better if it was not there at all. – Seth Warburton Apr 6 '18 at 8:35
  • Hi Seth, there is a <header> element, I just didn't copy it from the code. My bad. – Harald Apr 8 '18 at 1:31
  • A section element should contain a title in a heading tag, I.e <h1> to <h6>, if it doesn’t then <section> should not be used. – Seth Warburton Apr 12 '18 at 8:03
1

There is nothing that I can see in your CSS that hides the dropdown in the first place. Also I hope you don't mind me saying but your CSS seems over-complicated. To hide / show the drop down you could just use something along the lines of:

.dropdown { 
  height: 0; 
  visibility: hidden; /* Display: none; is bad for accessibility. */
}

.dropdown:hover,
/* Don't forget a focus state! */
.dropdown:focus {
  height: auto;
  visibility: initial;
}

There's no need to over specify your styles, it needlessly complicates things and adds bloat to your code, making it harder to debug for one.

| improve this answer | |
  • I'll try and rewrite a simpler version of the CSS with your suggestions and see what comes up. Thanks! :) – Harald Apr 8 '18 at 17:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.