CSS Responsive Navigation

asp_net2
asp_net2 used Ask the Experts™
on
Hello Experts,

I have the following code below that I could use some help with. The code below works fine with the hamburger icon on the left side. However, if I try to float the "hamburger" icon to the right the links below once you click on the hamburger icon do not drop down as they do when the hamburger icon is on the left in the original posted code. Also, the code below is a CSS Responsive Navigation without jS or jQuery.

<nav>
            <input type="checkbox" id="button">
            <label for="button"></label>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul> 
        </nav>

Open in new window



/
****************************************************************************
Navigation Styles 
****************************************************************************/

nav {
    width             : 100%;
    background-color  : $nav-bg;
    font-weight       : $font-weight--bold;
    
    input[type=checkbox] {
        position  : absolute;
        top       : -9999px;
        right      : -9999px;
    }
    
    label {
        display            : none;
        cursor             : pointer;
        background-image   : url("../img/nav.svg");
        background-repeat  : no-repeat;
    }
}
    
@include mq(sm) {
    nav {
        ul {
            display  : none;
            margin   : 0;
            padding  : 0;
            
            li {         
                padding          : $vertical-rhythm / 2;
                list-style-type  : none;
                text-align       : center;
                text-transform   : uppercase;		
          
                &:hover {
                    background-color: yellow;
                }
                       
                a {
                    display          : block;
                    text-decoration  : none;
                    
                    &:hover {
                        display          : block;
                        text-decoration  : none;
                    }
                }
            }
        }
        
        label {
            position          : relative;
            display           : block;
      		width             : 48px;
      		min-height        : 48px;         
 
              &:after {
                  position  : absolute;
                  top       : 10px;
      			  right     : 24px;  
              }
        }
          
        input[type=checkbox]:checked ~ label:after {
      		color: red;  // may not need
      	}

      	input[type=checkbox]:checked ~ ul {
      		display: block;

      		li {
      			width       : 100%;
        		text-align  : center;

        		&:after {
        			position  : absolute;
          			right     : .25em;
        		}
      		}
      	}
    }  
}

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Commented:
Try adding this CSS:
#buttonContainer {
float: right;
}

#buttonContainer label {
clear: right;
}

Open in new window

And try using this HTML:
<div id="buttonContainer">
<input type="checkbox" id="button">
<label for="button"></label>
</div>

Open in new window

Author

Commented:
@skij,

When I add that nothing happens when I click on the hamburger icon.
Kim WalkerWeb Programmer/Technician

Commented:
When the hamburger icon is on the left side, is it float left? Or is it not floated at all, left aligned by nature? When an element is floated, subsequent elements may be positioned beside it if there is room in the parent div.
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
@Kim,

The original code that I posted does NOT contain any floats. That was suggested and I also tried that but did not have any success with it.
Kim WalkerWeb Programmer/Technician

Commented:
I guess I don't understand the question. What you have described is expected behavior for a floated item. Floated items do not push things down if there is room for them to the side. That's the whole objective with floated items.

Where is the element that generates the hamburger icon you're trying to move. Is it the background image for one of these elements or is it another element entirely?

Author

Commented:
@Kim,

If you look at my previous post I supplied my code and markup. What I mentioned about "floats" was that I tried to float but that did not resolve my issue. I'm trying to come up with a CSS Responsive navigation that allows me to float if you will or position the hamburger icons to either the left or right side and then when you click on that navigation is displays the links below.
Kim WalkerWeb Programmer/Technician

Commented:
Can I assume your primary objective is to move the hamburger icon to the right side without affecting the position of content that follows it? Your initial question sounds as if your objective is to move down the links which follow the hamburger icon.

But then I still don't know what you are calling the hamburger icon. If it is part of the markup in the original question, please specify which element in that markup generates the hamburger icon. Or is there an img tag somewhere that generates the hamburger icon? I also need to know how it relates to the content you want it to be on the right side of. I need much more information than is supplied here.

Can you post a link to your page?

Author

Commented:
@Kim,

>> Can I assume your primary objective is to move the hamburger icon to the right side without affecting the position of content that follows it

Correct!

>> Your initial question sounds as if your objective is to move down the links which follow the hamburger icon.

When a user clicks on the hamburger icon I would like to have the links displayed at 100% width centered on screen.

>> But then I still don't know what you are calling the hamburger icon. If it is part of the markup in the original question, please specify which element in that markup generates the hamburger icon.

label {
        display            : none;
        cursor             : pointer;
        background-image   : url("../img/nav.svg");
        background-repeat  : no-repeat;
    }

Open in new window


>> Can you post a link to your page?

Sorry, I'm developing this site locally at the moment.
Kim WalkerWeb Programmer/Technician

Commented:
So at least I know that the label is the hamburger icon. This is progress. Now I just need to know what you want it to be on the right side of. It's kind of like you telling me you want it to be on the right side of the map but I don't know if you're looking at a map of Memphis or a map of China. Can you upload the HTML and CSS files for us to look at? We need to see the document structure and how the label relates to the elements you want it to be to the right of.

Author

Commented:
>> So at least I know that the label is the hamburger icon. This is progress. Now I just need to know what you want it to be on the right side of

I want the hamburger icon to be on the right side. Then when you click on the hamburger icon I want the navigation to be listed below the hamburger icon taking up 100% width.

This is what I'm looking for http://getbootstrap.com/examples/navbar-static-top/ in regards to the location of the hamburger icon and how I want it to react when clicked. I just don't want to use Bootstraps or have to use JS or jQuery. Also the solution to the link above allows you to add a logo that sits on the same row as the navigation icon which is also what I need.

HTML Structure:

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="apple-touch-icon" href="apple-touch-icon.png">
        <!-- Place favicon.ico in the root directory -->
        
        <link rel="stylesheet" href="css/application.css">
        <script src="js/vendor/modernizr-2.8.3.min.js"></script>
    </head>
    <body>
        <!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

        <!-- Add your site or application content here -->
        
        <nav>
            <input type="checkbox" id="button">
            <label for="button"></label>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul> 
        </nav>
       
        <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.12.0.min.js"><\/script>')</script>
        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>

        <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
        <script>
            (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
            function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
            e=o.createElement(i);r=o.getElementsByTagName(i)[0];
            e.src='https://www.google-analytics.com/analytics.js';
            r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
            ga('create','UA-XXXXX-X','auto');ga('send','pageview');
        </script>
    </body>
</html>

Open in new window


Navigation Styles:

/****************************************************************************
Navigation Styles 
****************************************************************************/

nav {
    width             : 100%;
    background-color  : $nav-bg;
    font-weight       : $font-weight--bold;
    
    input[type=checkbox] {
        position  : absolute;
        top       : -9999px;
        right      : -9999px;
    }
    
    label {
        display            : none;
        cursor             : pointer;
        background-image   : url("../img/nav.svg");
        background-repeat  : no-repeat;
    }
}
    
@include mq(sm) {
    nav {
        ul {
            display  : none;
            margin   : 0;
            padding  : 0;
            
            li {         
                padding          : $vertical-rhythm / 2;
                list-style-type  : none;
                text-align       : center;
                text-transform   : uppercase;		
          
                &:hover {
                    background-color: yellow;
                }
                       
                a {
                    display          : block;
                    text-decoration  : none;
                    
                    &:hover {
                        display          : block;
                        text-decoration  : none;
                    }
                }
            }
        }
        
        label {
            position          : relative;
            display           : block;
      		width             : 48px;
      		min-height        : 48px;         
 
              &:after {
                  position  : absolute;
                  top       : 10px;
      			  right     : 24px;  
              }
        }
          
        input[type=checkbox]:checked ~ label:after {
      		color: red;  // may not need
      	}

      	input[type=checkbox]:checked ~ ul {
      		display: block;

      		li {
      			width       : 100%;
        		text-align  : center;

        		&:after {
        			position  : absolute;
          			right     : .25em;
        		}
      		}
      	}
    }  
}

Open in new window

Web Programmer/Technician
Commented:
Again you've omitted the part you want to move it to the right of. There's nothing here but the menu item. By itself, it is both to the left and to the right since it is alone. But maybe we can still work with this. What does this do for you?
/****************************************************************************
Navigation Styles 
****************************************************************************/

nav {
    width             : 100%;
    background-color  : $nav-bg;
    font-weight       : $font-weight--bold;
	text-align        : right;
    
    input[type=checkbox] {
        position  : absolute;
        top       : -9999px;
        left      : -9999px;
    }
    
    label {
        display            : none;
        cursor             : pointer;
        background-image   : url("../img/nav.svg");
        background-repeat  : no-repeat;
    }
}
    
@include mq(sm) {
    nav {
        ul {
            display  : none;
            margin   : 0;
            padding  : 0;
            
            li {         
                padding          : $vertical-rhythm / 2;
                list-style-type  : none;
                text-align       : center;
                text-transform   : uppercase;		
          
                &:hover {
                    background-color: yellow;
                }
                       
                a {
                    display          : block;
                    text-decoration  : none;
                    
                    &:hover {
                        display          : block;
                        text-decoration  : none;
                    }
                }
            }
        }
        
        label {
            position          : relative;
            display           : inline-block;
      		width             : 48px;
      		min-height        : 48px;         
 
              &:after {
                  position  : absolute;
                  top       : 10px;
      			  right     : 24px;  
              }
        }
          
        input[type=checkbox]:checked ~ label:after {
      		color: red;  /* may not need */
      	}

      	input[type=checkbox]:checked ~ ul {
      		display: block;

      		li {
      			width       : 100%;
        		text-align  : center;

        		&:after {
        			position  : absolute;
          			right     : .25em;
        		}
      		}
      	}
    }  
}

Open in new window

I've made three changes — I inserted a line at line 9 and made changes at lines 14 and 56. Since there's nothing else on the page, this moves the icon to the right side of the window.

Author

Commented:
@Kim,

Yes, that worked exactly as I needed. Thank you!!!

Now, I have another question based on this. If you would like I could create a new post and provide  you the link to that post. What I need now is the ability to add my logo on the same row as the navigation icon if need be so that my logo and the navigation icon are on the same line together. How would you handle that?
Kim WalkerWeb Programmer/Technician

Commented:
That should probably be another question. But you could start by inserting the logo img in your label and adding a left padding to the label to make space for your navigation icon background image.

Author

Commented:
@Kim,

I created another post if you could assist with this. The left padding did not help.

Logo and Responsive Navigation Issue
https://www.experts-exchange.com/questions/28948544/Logo-and-Responsive-Navigation-Issue.html

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial