CODEWITHSUNDEEP
htmlcssresponsive-design
user7137459
user7137459

Reputation:

My mobile css isn't working

My mobile css hamburger menu isn't working, if I click on it it doesn't stay open, and I have no clue on how to open the dropdown menu inside the hamburger menu. Also my nav title (.logo) is hard to center, does anyone have a solution for that?

JSFidlle for easy viewability (Mobile css & Style.css in are merged here only the background is missing)

Thanks for any help, and sorry if my code looks messy :/

My Code:

Index.html file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello, I'm Sten</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/mobile.css">
    <link rel="stylesheet" href="css/animate.css">
</head>
<body>
   <div class="nav animated slideInDown">
       <img src="img/hamburger.png" alt="" class="hamburger">
       <div class="logo">
          <h1>STEN</h1>
       </div>
       <ul>
           <li>
               <a href="#">PAGE</a>
               <ul>
                   <li><a href="#">DROPDOWN</a></li>
                   <li><a href="#">DROPDOWN</a></li>
               </ul>
           </li>
           <li><a href="#">PAGE</a></li>
           <li><a href="#">PAGE</a></li>
           <li><a href="#">PAGE</a></li>
       </ul>
   </div>

   <div class="landing animated fadeIn">
       <div class="container">
            <h1>STEN</h1>
            <hr>
            <p>I'M A</p>
            <h2>-OCCUPATION-</h1>
            <button>KNOP</button>
            <button>KNOP</button>
        </div>
        <div class="scroll" onClick="">

        </div>
   </div>

   <div class="about">

   </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script scr="main.js"></script>
</body>
</html>

Style.css (Master css file)

* {
    padding: 0;
    margin: 0;
    border: 0;
}

html, body {
    height: 100%;
    width: 100%;
    font-family: 'Open Sans', sans-serif;
}

h1 {
    font-weight: 300;
    font-size: 50px;
}

.nav {
    width: 100%;
    height: 10%;
    background-color: #F2F2F2;
    border-bottom: 1px solid #E4E4E4;
    text-align: center;
    position: fixed;
    z-index: 999;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.nav .hamburger {
    display: none;
}

.nav .logo {
    float: left;
    margin-left: 10%;
}

.nav .logo h1 {
    color: #000;
    line-height: 10vh;
    font-size: 32px;
}

.nav > ul {
    height: 100%;
    width: auto !important;
    display: inline-block;
    float: right;
    margin-right: 10%;

}

.nav > ul > li {
    display: inline-block;
    list-style: none;
    padding: 0 20px 0 20px;
    vertical-align: top;
    position: relative;
}

.nav > ul > li:first-child > a:after {
    width: 6px;
    height: 6px;
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
    position: absolute;
    margin-top: calc(5vh - 5px);
    margin-left: 8px;
    content: "";
    transform: rotate(45deg);
}

.nav > ul > li > ul {
    display: none;
    margin-left: -50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.nav > ul > li > ul > li {
    list-style: none;
    background-color: #F2F2F2;
    padding: 0 20px 0 20px;
    position: relative;
}

.nav li:hover > ul {
    display: block;
    position: absolute;
}

.nav ul a {
    color: #000;
    text-decoration: none;
    line-height: 10vh;
}

.nav a:hover {
    color: #999;
}

.landing {
    padding-top: 10vh;
    height: 90%;
    width: 100%;
    background: url('../img/bg.jpg');
    background-size: cover;
    background-position: center;
    position: fixed;
    text-align: center;
    color: #FFF;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    z-index: 0;
}

.landing:before {
    content: " ";
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.4);
}

.landing .container {
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    width: 100%;
}

.landing .container h1 {
    letter-spacing: 6px;
    font-size: 78px;
}

.landing .container p {
    font-size: 20px;
    font-weight: 100;
}

.landing hr {
    width: 300px;
    margin: 25px 0 25px 0;
    margin-left: calc(50% - 150px);
    border-bottom: 3px solid #EF2D56;
}

.landing button {
    width: 200px;
    padding: 24px;
    margin-top: 20px;
    position: relative;
    color: #FFF;
    background-color: transparent;
    border: 1px solid #FFF;
}

.landing button:first-child {
    margin-right: 1%;
}

.landing button:last-child {
    margin-left: 1%;
    background-color: #EF2D56;
    border: 1px solid #EF2D56;
}

.landing button:hover {
    cursor: pointer;
}

.landing button:focus {
    outline: none;
}

.scroll {
    width: 16px;
    height: 16px;
    border-bottom: 1px solid #FFF;
    border-right: 1px solid #FFF;
    position: absolute;
    content: " ";
    transform: rotate(45deg);
    bottom: 0;
    margin-bottom: 30px;
    margin-left: calc(50% - 8px);
    cursor: pointer;
}

.about {
    height: 200%;
    width: 100%;
    background-color: #FFF;;
    z-index: 50;
    position: absolute;
    margin-top: 100vh;
}

Mobile css file

@media only screen and (max-device-width: 850px){
    .nav .hamburger {
        height: 6vh;
        width: 6vh;
        display: inline-block;
        float: left;
        margin: 2vh 0 0 2vh;
    }

    .nav .logo {
        position: relative;
    }

    .nav > ul {
        display: none;
        float: none;
        margin-top: 10vh;
    }

    .nav .hamburger:hover ~ ul {
        display: block;
        width: 100%;
        margin: 0;
    }

    .nav > ul > li {
        display: block;
        background-color: #F2F2F2;
    }

    .about {
        margin-top: 100vh;
    }
}

Upvotes: 3

Views: 594

Answers (2)

XYZ
XYZ

Reputation: 4480

chnage your media query into this @media only screen and (max-width:850px){}.

  1. If you are using the max-device-width, when you change the size of the browser window on your desktop, the CSS style won't change to different media query setting;
  2. If you are using the max-width, when you change the size of the browser on your desktop, the CSS will change to different media query setting and you might be shown with the styling for mobiles, such as touch-friendly menus.

for more info you can visit this http://www.menucool.com/3613/max-device-width-vs-max-width-Which-one-should-I-use

check this fiddle https://jsfiddle.net/ok7hmodo/1/

For making the menu static use Jquery.Please check this https://jsfiddle.net/7xjyutuf/10/.

This is a css only solution.You have to make the ul display block when user hovers on it https://jsfiddle.net/tucsgohy/1/

Upvotes: 1

Jim Fahad
Jim Fahad

Reputation: 635

Change the way you wrote media query, Try this way:

@media only screen and (max-width: 850px) {
    //Your mobile CSS code
}

See the fiddle: https://jsfiddle.net/7xjyutuf/1/

Upvotes: 1

Related Questions