/    Sign up×
Community /Pin to ProfileBookmark

On Click show menu

Copy linkTweet thisAlerts:
May 20.2021

Trying to show a menu when a bars icon is clicked, the bars icon is a label for a checkbox. the checkbox is checking and unchecking but my css isn’t being applied.

I’ve done this before, a while ago. Can’t seem to see what’s wrong.

Any ideas?

[code]
 <style>
.mobile{
color: #FFF;
line-height: 126px;
font-size: 3em;
right: 15px;
position: absolute;
}

.mobileMenuDisplay{
position: absolute;
left:0;
top: 126px;
width: 100%;
height: 0;
}

#mobileMenu:checked ~ .mobileMenuDisplay{
position: absolute;
left:0;
top: 126px;
width: 100%;
height: 100vh !important;
background-color: #000;
z-index:50;
}
</style>

<div class=”mobile”>
<input id=”mobileMenu” type=”checkbox”>
<label for=”mobileMenu”>
<i class=”fas fa-bars”></i>
</label>
</div>

<div class=”mobileMenuDisplay”>
<ul>
<li>test</li>
</ul>
</div>
[/code]

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@SempervivumMay 20.2021 — The reason is that `.mobileMenuDisplay</C> is not a sibling of <C>#mobileMenu</C>. Addressing it would require to step up in the tree which is not possible by CSS.<br/>
Either omit the container <C>.mobile</C> or place the input inside <C>.mobileMenuDisplay`.
Copy linkTweet thisAlerts:
@kiwisauthorMay 20.2021 — I knew it was simple. I need more sleep
Copy linkTweet thisAlerts:
@kiwisauthorMay 20.2021 — Okay then,

<i>
</i>
@media only screen and (max-width: 1200px) {

<i> </i>.searchBox{
<i> </i> display: none !important;
<i> </i>}

<i> </i>.top-banner .desktopMenu {
<i> </i> display: none !important
<i> </i>};

<i> </i>.top-banner .mobileMenuIcon{
<i> </i> display: block !important;
<i> </i> color: green !important;
<i> </i>}

}


Desktop menu disappears, but nothing happens to mobile icon. It's at the same level as dekstopmenu as in, in the same container being (top-banner)

how does one troubleshoot this.
Copy linkTweet thisAlerts:
@SempervivumMay 20.2021 — >how does one troubleshoot this.

Use the HTML inspector of the developer tools of your browser, it will show you which CSS is active or overwritten by another one.

If you cannot fix it post the HTML.
Copy linkTweet thisAlerts:
@kiwisauthorMay 20.2021 — Here's my HTML

<i>
</i>&lt;div class="top-banner"&gt;
&lt;div class="top-image"&gt;
&lt;a href="index.php"&gt;&lt;img src="Images/logo.png" alt="My Loho"&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;div class="menuLinks"&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="link.php"&gt;Link&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="link.php"&gt;Link&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="link.php"&gt;Link&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="link.php"&gt;Link&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class="menuBtn"&gt;
&lt;label for="mobileMenu" class="mobileMenuIcon"&gt;
&lt;i class="fas fa-bars"&gt;&lt;/i&gt;
&lt;/label&gt;
&lt;/div&gt;

<i> </i>

<i> </i> &lt;div class="mobileMenuDisplay"&gt;
<i> </i> &lt;ul&gt;
<i> </i> &lt;li&gt;&lt;a href="link.php"&gt;Link&lt;/a&gt;&lt;/li&gt;
<i> </i> &lt;li&gt;&lt;a href="link.php"&gt;Link&lt;/a&gt;&lt;/li&gt;
<i> </i> &lt;li&gt;&lt;a href="link.php"&gt;Link&lt;/a&gt;&lt;/li&gt;
<i> </i> &lt;li&gt;&lt;a href="link.php"&gt;Link&lt;/a&gt;&lt;/li&gt;
<i> </i> &lt;/ul&gt;
<i> </i> &lt;/div&gt;
<i> </i>&lt;/div&gt;
<i> </i>
Copy linkTweet thisAlerts:
@SempervivumMay 20.2021 — I cannot spot any CSS that makes the mobile menu visible. If you intend to use the checkbox trick you need a checkbox.

I added some CSS for the desktop layout und this works for me:
``<i>
</i>&lt;!doctype html&gt;
&lt;html&gt;

&lt;head&gt;
&lt;title&gt;Nav Flex Margin&lt;/title&gt;

&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /&gt;

&lt;style&gt;
/* Create layout for desktop:
Menu for desktop visible
Hamburger Icon invisible
Checkbox for mobile menu invisible
Menu for mobile invisible */
.top-banner ul li {
list-style: none;
}

.top-banner .desktopMenu ul {
display: flex;
}

.top-banner .mobileMenuIcon {
display: none;
}

.top-banner #mobileMenuCheckbox {
display: none;
}

.top-banner .mobileMenuDisplay {
display: none;
}

/* Adjust layout for mobiles::after
Hide menu for desktop
Hamburger Icon visible */
@media only screen and (max-width: 1200px) {

.searchBox {
display: none !important;
}

.top-banner .desktopMenu {
display: none;
}

.top-banner .mobileMenuIcon {
display: block;
color: green;
}

.top-banner #mobileMenuCheckbox:checked~.mobileMenuDisplay {
display: block;
}

}
&lt;/style&gt;

&lt;/head&gt;

&lt;body&gt;
&lt;div class="top-banner"&gt;
&lt;div class="top-image"&gt;
&lt;a href="index.php"&gt;&lt;img src="Images/logo.png" alt="My Loho"&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;div class="menuLinks desktopMenu"&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="link.php"&gt;Link&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="link.php"&gt;Link&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="link.php"&gt;Link&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="link.php"&gt;Link&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class="menuBtn"&gt;
&lt;label for="mobileMenuCheckbox" class="mobileMenuIcon"&gt;
&lt;i class="fa fa-bars"&gt;&lt;/i&gt;
&lt;/label&gt;
&lt;/div&gt;
&lt;input type="checkbox" id="mobileMenuCheckbox"&gt;
&lt;div class="mobileMenuDisplay"&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="link.php"&gt;Link&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="link.php"&gt;Link&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="link.php"&gt;Link&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="link.php"&gt;Link&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;<i>
</i>``

Some remarks:
  • - Consider using semantic tags like <header> and <nav>.

  • - Very often it is not necessary to duplicate the link list. Instead it's layout can be adjusted by CSS for desktop or mobile.
    • ×

    Success!

    Help @kiwis spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 4.25,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,

    tipper: @Samric24,
    tipped: article
    amount: 1000 SATS,
    )...