Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS my menu button when clicked isn't opening the nav and it should be

P

prepare1337

Coder
this is the code for my nav

CSS: 
.nav {
    z-index: 1;
    width: 100%;
    background-color: red;
    display: block;
    position: absolute;
    top: 100%;
}
.nav ul {
    display: none;
}

and this is the code for my menu

/* checkbox (for menu) */
.menu-icon-wrap {

    /* background color of checkbox */
    top: 5.5px;
    left: 960px;
    /* position of entire menu /w checkbox */
    position: absolute;
    /* ^ this allows checkbox to be positioned */
    cursor: pointer;
    z-index: 1;
}
/* (menu) */
.menu-icon {
    padding: 15px 20px;
    display: block;
    float: right;
    /* ^ makes the menu go beside(next to) the checkbox */
    cursor: pointer;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.menu-icon .navicon {
   position: absolute;
   top: 14px;
   left: 10px;
   width: 20px;
   height: 2.5px;
   background: black;
   border-radius: 4px;
   transition: 0.5s;
   display: block;
   z-index: 1;

}
.menu-icon .navicon:before,
.menu-icon .navicon:after {
    content: '';
   transform: translateY(-6px);
   width: 15px;
   height: 2.5px;
   background: black;
   display: block;
   position: relative;
}
.menu-icon .navicon:after {
    content: '';
    transform: translateY(+4.5px);
    height: 2.2px;
    width: 10px;
    display: block;
    position: relative;
    background: black;
}
.menu-btn:checked ~ .menu-icon .navicon
 {
    background: transparent;
}
.menu-btn:checked ~ .menu-icon .navicon:after {
    width: 21px;
    transform: translateY(0px) rotate(315deg);
    transition-delay: 0.125s;
}
.menu-btn:checked ~ .menu-icon .navicon:before {
    width: 25px;
    transform: translateY(0px) rotate(45deg);  
    transition-delay: 0.125s;
}

.menu-btn {
    display: none;
}
.menu-btn:checked ~ .sub-nav {
   display: block;
   position: absolute;
   top: 100;
   left: 920px;
   z-index: 2;
   width: 100px;
   height: 100px;
}



ul {
    padding-left: 10px;
    padding-top: 35px;
}

li {
  display: block;
  padding-left: 25px;
  padding-top: 2px;
}




--color-link-toc: #878787;

.sub-nav {
    display: none;
}
.sub-nav-item {
 pointer-events: none;
 opacity: 0;
 display: block;
 margin: 0.35rem 0;
 opacity: 0;
}
.sub-nav-title {
 pointer-events: none;
 color: var(--color-link-toc);
}

and this is the html


HTML: 
 <div.navbar class="navbar">
            <!-- ^ header -->

            <h2 class="nav__chapter"> <a href="#">Home</a></h2>



            <div class="menu-icon-wrap">
                <input type="checkbox" class="menu-btn" id="menu-btn">
                <label for="menu-btn" class="menu-icon">
                    <span class="navicon"></span>
                </label>
            </div>

            <nav class="nav">
               <!-- ^ nav -->
                    <ul class="sub-nav">
                          <li><a href="#entry-1">Home</a></li>
                          <li><a href="#entry-1">About</a></li>
                          <li><a href="#entry-1">Testimonials</a></li>
                          <li><a href="#entry-1">Moodboard</a></li>
                          <li><a href="#entry-1">Contact</a></li>
                    </ul>

            </nav>
        </div.navbar>


please help me. I've been banging my head against the table trying to figure this out. I've spent days on this and can't get it working. I should be able to click the menu (checkbox) and when checked it should open the sub-nav or (nav). what am I doing wrong?
 
Last edited by a moderator:
Sort by date Sort by votes
I am doing an adaptive design, not responsive. So, I need to find a way to get this to work. I thought maybe the reason it won’t work is because I haven’t set up the pages for the menu items to link to yet. Not sure though.
 
Upvote 0 Downvote
alright, I've checked for errors. there are none. as for the entire code. I don't see the reason why that's necessary. here it is.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1,brave=1,safari=1">
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<link rel="shortcut icon" href="../favicon.ico">
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="css/navbar.css" />
<link rel="stylesheet" type="text/css" href="css/menu2.css" />
<link rel="stylesheet" type="text/css" href="css/container.css" />
<link rel="stylesheet" type="text/css" href="css/footer.css" />
<meta name="viewport"
content="width=device-width, initial-scale=1">
<style type="text/css">
/* Css goes here (adding css media queries or styles) */
@media only screen and (min-width : 321px) {
/* pull code for individual layout */
}
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape note to self check if this works for really large tablets or large ipads or just remove this one) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/**********
iPad 3
**********/
@media
only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
@media
only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops and ipads 3rd gen or newer ----------- */
@media only screen
and (min-width : 1280px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
@media
only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
* { margin: 0; }

nav-brand::before {

}
h1::after {}
</style>

</head>
<body>


<div.navbar class="navbar">
<!-- ^ header -->
<h2 class="nav__chapter"> <a href="#">Home</a></h2>



<div class="menu-icon-wrap">
<input type="checkbox" class="menu-btn" id="menu-btn">
<label for="menu-btn" class="menu-icon">
<span class="navicon"></span>
</label>
</div>
<nav class="nav">
<!-- ^ nav -->
<ul class="sub-nav">
<li><a href="#entry-1">Home</a></li>
<li><a href="#entry-1">About</a></li>
<li><a href="#entry-1">Testimonials</a></li>
<li><a href="#entry-1">Moodboard</a></li>
<li><a href="#entry-1">Contact</a></li>
</ul>

</nav>
</div.navbar>

<!--main -->
<!-- container for slider -->
<div id="container">
<slider class="slider">




</slider>
</div>

<!-- Footer(formerly content-wrappertr5a)-->
<footer class="footer-container-bottom">



<h2>About this slider</h2>
</footer>
</body>
</html>
 
Last edited:
Upvote 0 Downvote
I asked for the complete code so as to be able to try it out, and perhaps see what is going wrong. This is far from the complete code, it's missing a js file and 5 css files. Anyway, a quick look at the HTML explains why your checkbox isn't doing anything. An <input> element is just a field where you can enter data, nothing more or less. You can't make it actually do anything. Typically these elements are inside of a <form action="url">...</form> together with a Submit button.

If you want something to happen immediately when you click the checkbox, you need to make it into a button or some other element that has an onClick method. I guess it will be easy to find some CSS on the web to make it look like a checkbox.

As for your definition of the <label>, I think you need a fixed text in there, not some HTML element like <span>. But that is really a moot point now.
 
Upvote 0 Downvote
HTML: 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1,brave=1,safari=1">
        <link rel="shortcut icon" href="../favicon.ico">
        <link rel="stylesheet" type="text/css" href="css/style.css" />

        <meta name="viewport"
        content="width=device-width, initial-scale=1">

        <style type="text/css">
                              /* Css goes here (adding css media queries or styles)  */
                @media only screen and (min-width : 321px) {
                        /* pull code for individual layout */
                }

                @media only screen
                and (min-device-width : 320px)
                and (max-device-width : 480px) {
                /* Styles */
                }

                /* Smartphones (landscape) ----------- */
                @media only screen
                and (min-width : 321px) {
                /* Styles */
                }

                /* Smartphones (portrait) ----------- */
                @media only screen
                and (max-width : 320px) {
                /* Styles */
                }

                /* iPads (portrait and landscape note to self check if this works for really large tablets or large ipads or just remove this one) ----------- */
                @media only screen
                and (min-device-width : 768px)
                and (max-device-width : 1024px) {
                /* Styles */
                }

                /* iPads (landscape) ----------- */
                @media only screen
                and (min-device-width : 768px)
                and (max-device-width : 1024px)
                and (orientation : landscape) {
                /* Styles */
                }

                /* iPads (portrait) ----------- */
                @media only screen
                and (min-device-width : 768px)
                and (max-device-width : 1024px)
                and (orientation : portrait) {
                /* Styles */
                }
                /**********
                iPad 3
                **********/
                @media
                only screen
                and (min-device-width : 768px)
                and (max-device-width : 1024px)
                and (orientation : landscape)
                and (-webkit-min-device-pixel-ratio : 2) {
                /* Styles */
                }

                @media
                only screen
                and (min-device-width : 768px)
                and (max-device-width : 1024px)
                and (orientation : portrait)
                and (-webkit-min-device-pixel-ratio : 2) {
                /* Styles */
                }
                /* Desktops and laptops and ipads 3rd gen or newer ----------- */
                @media only screen
                and (min-width : 1280px) {
                /* Styles */
                }

                /* Large screens ----------- */
                @media only screen
                and (min-width : 1824px) {
                /* Styles */
                }

                /* iPhone 4 ----------- */
                @media
                only screen
                and (min-device-width : 320px)
                and (max-device-width : 480px)
                and (orientation : landscape)
                and (-webkit-min-device-pixel-ratio : 2) {
                /* Styles */
                }

                @media
                only screen
                and (min-device-width : 320px)
                and (max-device-width : 480px)
                and (orientation : portrait)
                and (-webkit-min-device-pixel-ratio : 2) {
                /* Styles */
                }
                * { margin: 0; }
                

                nav-brand::before {
                
                }
                h1::after {}

            </style>
        
    </head>
    <body>
      
                
            <div.navbar class="navbar">
                <!-- ^ header -->

                <h2 class="nav__chapter"> <a href="#">Home</a></h2>
            
                      
                        
                <div class="menu-icon-wrap">
                    <input type="checkbox" class="menu-btn" id="menu-btn">
                    <label for="menu-btn" class="menu-icon">
                        <span class="navicon"></span>
                    </label>
                </div>

                <nav class="nav">
                   <!-- ^ nav -->
                        <ul class="sub-nav">
                              <li><a href="#entry-1">Home</a></li>
                              <li><a href="#entry-1">About</a></li>
                              <li><a href="#entry-1">Testimonials</a></li>
                              <li><a href="#entry-1">Moodboard</a></li>
                              <li><a href="#entry-1">Contact</a></li>
                        </ul>
                        
                </nav>
            </div.navbar>
    
                      <!--main -->
              <!-- container for slider -->
    <div id="container">
        <slider class="slider">
            
                
 
 
                        </slider>
                    </div>               
                    
                                            <!-- Footer(formerly content-wrappertr5a)-->
                                            <footer class="footer-container-bottom">
                                                
      
                                                
            <h2>About this slider</h2>
        </footer>

    </body>
</html>


CSS: 
:root {
    --background: rgba(255, 255, 255);
}

/* Header Style */

.navbar {
    width: 64em;
    height: 2.5625em;
    display: block;
    background: var(--background);
    position: relative;
    overflow: visible;
}
@media only screen
and (max-device-width : 80em){
    
    width: 64em;
    height: 2.5625em;
    display: block;
    
    z-index: 9999;
    position: absolute;
}
/* Nav Style */

.nav {
    z-index: 1;
    width: 100%;
    background-color: red;
    display: block;
    position: absolute;
    top: 100%;
}
.nav ul {
    display: none;
}


/* checkbox (for menu) */
.menu-icon-wrap {

    /* background color of checkbox */
    top: 5.5px;
    left: 960px;
    /* position of entire menu /w checkbox */
    position: absolute;
    /* ^ this allows checkbox to be positioned */
    cursor: pointer;
    z-index: 1;
}
/* (menu) */
.menu-icon {
    padding: 15px 20px;
    display: block;
    float: right;
    /* ^ makes the menu go beside(next to) the checkbox */
    cursor: pointer;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.menu-icon .navicon {
   position: absolute;
   top: 14px;
   left: 10px;
   width: 20px;
   height: 2.5px;
   background: black;
   border-radius: 4px;
   transition: 0.5s;
   display: block;
   z-index: 1;
  
}
.menu-icon .navicon:before,
.menu-icon .navicon:after {
    content: '';
   transform: translateY(-6px);
   width: 15px;
   height: 2.5px;
   background: black;
   display: block;
   position: relative;
}
.menu-icon .navicon:after {
    content: '';
    transform: translateY(+4.5px);
    height: 2.2px;
    width: 10px;
    display: block;
    position: relative;
    background: black;
}
.menu-btn:checked ~ .menu-icon .navicon
 {
    background: transparent;
}
.menu-btn:checked ~ .menu-icon .navicon:after {
    width: 21px;
    transform: translateY(0px) rotate(315deg);
    transition-delay: 0.125s;
}
.menu-btn:checked ~ .menu-icon .navicon:before {
    width: 25px;
    transform: translateY(0px) rotate(45deg);   
    transition-delay: 0.125s;
}

.menu-btn {
    display: none;
}
.menu-btn:checked ~ .sub-nav {
   display: block;
   position: absolute;
   top: 100;
   left: 920px;
   z-index: 2;
   width: 100px;
   height: 100px;
}



ul {
    padding-left: 10px;
    padding-top: 35px;
}

li {
  display: block;
  padding-left: 25px;
  padding-top: 2px;
}

 .nav__chapter {
    float: right;
    left: 915px;
    top: 10px;
    position: absolute;
    font-size: inherit;
    font-weight: normal;
    margin: 0;
    display: inline-block;
    line-height: 1;
}


--color-link-toc: #878787;

.sub-nav {
    display: none;
}
.sub-nav-item {
 pointer-events: none;
 opacity: 0;
 display: block;
 margin: 0.35rem 0;
 opacity: 0;
}
.sub-nav-title {
 pointer-events: none;
 color: var(--color-link-toc);
}
::after
.container{
    height: 42.9375em;
    width: 64em;
    display: block;
    opacity: 100%;
    position: relative;
    margin: 0;
    
}
.slider{
    height: 42.9375em;
    width: 1024px;
    display: block;
    background-image: url("../images/filler 1.png");
    position: relative;
    z-index: 3;
}
.slide--layout-1 {
    background-image: url("../img/cyan.jpg");
    width: 100%;
    height: 100%;
    background-size: cover;
    }
        .slide--layout-2 {
    background-image: url("../img/yellow.jpg");
    width: 100%;
    height: 100%;
    background-size: cover;
    }
    .slide--layout-3 {
    background-image: url("../img/magenta.jpg");
    width: 100%;
    height: 100%;
    background-size: cover;
    }
    .slide--layout-4 {
    background-image: url("../img/example scrollbar.jpg");
    width: 100%;
    height: 100%;
    background-size: cover;
    }
    .slide--layout-5 {
    background-image: url("../img/90.jpg");
    width: 100%;
    height: 100%;
    background-size: cover;
    }
    .slide--layout-6 {
    background-image: url("../img/90.jpg");
    width: 100%;
    height: 100%;
    background-size: cover;
    }
    .slide--layout-7 {
    background-image: url("../img/90.jpg");
    width: 100%;
    height: 100%;
    background-size: cover;
    }
    .slide--layout-8 {
    background-image: url("../img/90.jpg");
    width: 100%;
    height: 100%;
    background-size: cover;
    }


.container-desktop{
    
}
/* Footer Style */
.footer-container-bottom {
    width: 64em;
    height: 2.5625em;
    display: block;
    background: var(--background);
    position: relative;
    
    margin: 0;
    bottom: 0;
}
@media only screen
and (max-device-width : 80em){
    
    width: 64em;
    height: 2.5625em;
    display: block;
    background: var(--background);
    z-index: 9999;
    position: absolute;
}
.footer-wrapper {
    padding: 0;
    width: 100%;
    max-width: 100vw;
    margin: 0;
}

.footer-wrapper p{
    padding-top: 20px;
    line-height: 26px;
}
.footer {
    padding: 0;
    width: 64em;
    height: 2.5625em;
    margin: 0;
}
 
Upvote 0 Downvote
you asked for all the code, that's all the code, I removed the code that's gonna confuse you. I've attached the image I used in the .slider css. you have to create a css folder and a style.css file and paste all the css into it. make a images folder, put the image in it. I shouldn't have to tell you all these things. this is baby stuff. All the time I've spent replying to you, someone could have tested the code by now and found the problem by starting a fresh html file and paste the important code from what I've provided. It's nothing more than a hamburger menu that I need to show the nav menu when clicked, simple as that. Either the way I coded it is wrong or what I'm trying to accomplish hasn't been done before, hense why I'm now posting on forums to find someone who knows what the problem is. It's a nav menu that should be showing in front of the container. trasnparently overlapping. the nav menu is made and so is the button that should trigger it. I now just need to connect the two.

I was trying to accomplish something similar to this. https://stackoverflow.com/questions/35725833/how-to-make-a-nav-menu-overlap-the-body-of-the-page there's a navbar(which has a nav and a menu button for children) a container, which has a slider for a child and a footer. with all due respect, label and input definitions aren't only used for the things you've mentioned. They can be used as such too. If you need me to explain it I can but in pm, this isn't the place for me to explain how code works. I'm trying to seek a resolution to a problem. If you can't pinpoint the issue causing the nav not to work then just say that and step aside. Someone else whom this is their forte will come along and help me solve it.
 

Attachments

  • filler 1.png
    filler 1.png
    3.6 KB · Views: 2
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

Code Academy Advertisement
DataCamp Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom