make css dropdown menu responsive

Question

I'm trying to make css drop-down menu responsive according to the browser window.

I want the menu text to stay centered according to the browser window

Please see this video as examples of the intended behavior:

/* ------------------------------------------ */
/* BASIC SETUP */
/* ------------------------------------------ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.page-wrap {
    width: 1216px;
    margin: 0 auto;
}

/* ------------------------------------------ */
/* PAGE CONTENT */
/* ------------------------------------------ */
    
.box1 {
    height: 30px;
    width: 300px;
    background: #8242b1;
}    
    
.box2 {
    height: 30px;
    width: 300px;
    background: #b14242;
}     
    
.box3 {
    height: 30px;
    width: 300px;
    background: #424bb1;
}      

.page-content {
    display:flex;
    justify-content: center;
    transition: ease-in-out 0.3s;
    position:relative;
    top: -260px;
    z-index: 0; }
    
.toggle {
    transition: ease-in-out 0.3s;
    text-decoration: none;
    font-size: 30px;
    color: #eaeaea;
    position:relative;
    top: -120px;
    left: 20px;
    z-index: 1; }
    .toggle:hover  {
        color:#cccccc; }

.sidebar {
    display:flex;
    justify-content: center;
    align-items: center;
    transition: ease-in-out 0.3s;
    position: relative;
    top: -220px;
    bottom: 0px;
    left: 0px;
    height: 220px;
    width: auto;
    padding: 30px;
    background: #333;
    z-index: 1; }
    .sidebar li {
        display:flex;
        justify-content: center;
        list-style: none;
        color: rgba(255, 255, 255,0.8);
        font-family: 'Lato', sans-serif;
        font-size: 16px;
        margin-bottom: 16px;
        cursor: pointer; }
        .sidebar li:hover {
            color: rgba(255, 255, 255,1); }

#sidebartoggler {
  display: none; }
  #sidebartoggler:checked + .page-wrap .sidebar {
    top: 0px; }
  #sidebartoggler:checked + .page-wrap .toggle {
    top: 100px; }
  #sidebartoggler:checked + .page-wrap .page-content {
    padding-top: 220px; }

<!DOCTYPE html>
<html lang="en">
    
<head>

        <link rel="stylesheet" type="text/css" href="resources/css/style.css">        
        <link href='https://fonts.googleapis.com/css?family=Lato:400,900' rel='stylesheet' type='text/css'>
            
    </head>
    
<body>


<input type="checkbox" id="sidebartoggler" name="" value="">    
    
<div class="page-wrap"> 
    
    <div class="sidebar">
        <ul>
            <li>Home</li>
            <li>Projects</li>
            <li>Clients</li>
            <li>Blog</li>
            <li>Contact</li>
        </ul>
    </div>
    
    <label for="sidebartoggler" class="toggle">☰</label>
    
    <div class="page-content">
        <div class="box1"></div>            
        <div class="box2"></div>            
        <div class="box3"></div>            
    </div>
  
</div>
    
</body>
</html>

sparrow · Accepted Answer · 2015-10-06 09:13:14Z

2

this will work,

.page-wrap{
width:1216px;
}

+ use Media Queries as follows:

@media only screen and (max-width: 1216px) {

.page-wrap{
width: 100%;}

}

edited Oct 6, 2015 at 9:13

sparrow

572 silver badges10 bronze badges

answered Sep 30, 2015 at 12:27

Sanjay Bhardwaj

4122 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

sparrow Over a year ago

Yes it is in the middle now BUT the menu is stretched 100% now, I want to keep the 1216px width. Do you know how to do it? Thanks a lot in advance.

th0ward Over a year ago

could you provide a fiddle?

sparrow Over a year ago

OK Now can you make it so it will stay 1216px wide while the menu text stays centered according to the browser window?

Sanjay Bhardwaj Over a year ago

.page-wrap{ width:1216px; }

sparrow Over a year ago

BUT then the text doesnt scale in the middle when the window is small

|

Collectives™ on Stack Overflow

make css dropdown menu responsive

1 Answer 1

+ use Media Queries as follows:

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

+ use Media Queries as follows:

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related