0

i'm having trouble making a custom pure css mobile first responsive navigation from scratch. i have this navigation menu i found on the internet and trying to manipulate the code so i can have a horizontal navigation bar on an inline block. I want the navigation bar to uncollpase as it was for a desktop version and show the links when i set a media query at min-width: 480px and hide the navicon. Not sure how exactly to go about it. This is what i have so far. any help would be appreciated thank you. Here's the original navigation bar code unedited that i tried to modify

DEMO: http://cssdeck.com/labs/dropdown-menu

HTML:

 <body>
<div id="header">
    <div id="logo">
    </div>

<input type="checkbox" class="checkbox" name="menu" value="mobiledropmenu" id="mobiledropmenu">
                        <label for="mobiledropmenu" class="label"><img src="http://developer.jmbarcelon.com/Images/dropmenu.png"></label>

    <div class="title">
        <div class="button">Home</div>
        <div class="button">Casa</div>
        <div class="button">Zahause</div>
        <div class="button">Maison</div>
    </div>


<h1>Drop-Down Menu</h1>

</div>

CSS:

background:#E5F2FF;
}

#header {
    width:100%;
    background:#72BBFF;
    z-index:2;
}

.checkbox {
     display: none;
} 
.label{
    -webkit-transition:.3s;
    -moz-transition:.3s;
    -o-transition:.3s;
    transition:.3s;
    width: 64px;
    height:64px;
    font-size: 20px;
    display: inline-block;
    background-size:cover;
    margin:.5em;
    background:rgba(0,132,255,0.15);
    box-shadow: 1px 1px 5px rgba(0, 135, 255,0.5);
    border-radius:1px;
}

.checkbox:checked + .label {
     -webkit-transition:.3s;
     -moz-transition:.3s;
     -o-transition:.3s;
     transition:.3s;
     box-shadow:inset 0px 0px 10px rgba(0, 135, 255,0.5);
     background:rgba(0,132,255,0.3)
}

#mobiledropmenu:checked ~ .title {
    -webkit-transition:1s;
    width: 100%;
    height: 250px;
    opacity: 1;
}

.title {
    -webkit-transition:1s;
    width: 0%;
    height: 0px;
    opacity: 0;
}

.button {
    color:#fff;
    text-decoration:none;
    border-top:1px solid #fff;
    text-align:center;
    text-transform:uppercase;
    width:100%;
    padding:1.2em;
                }

.button:hover {
    cursor:pointer;
    background:rgba(0,132,255,0.15);
        }


h1 {
    width:100%;
    color:rgba(188, 230, 255, 0.2);
    text-align:center;
    text-transform:uppercase;
    text-shadow: 1px 3px 6px #E5F2FF,
    0 0 0 #47a0d3,
    1px 4px 6px #E5F2FF;
    font-weight:lighter;
    font-size:2.5em;
    position:absolute;
    margin-top:10%;
}

@media only screen and (min-width: 480px){
    h1{color: red;}
    .label {display: none;}
    .title {display: inline-block;

1 Answer 1

0

OK, I removed the false start and here's a working example for you based on your edited question. I added this under the CSS in your linked code:

@media only screen and (min-width: 480px){
  /* always show the nav, and make it a fixed height */
  .title {
  width: 100%;
  height: 50px;
  opacity: 1;
  }

  /* change nav items to be horizontal and only as big as they need */
  .button {
      height: 50px;
      display: inline-block;
      width: auto;
  }
  /* hide the menu toggle button */
  .label { display: none; }
}

What this does is hide the menu toggle and switch the nav to always be visible, and be horizontal. Example is here: http://cssdeck.com/labs/hehuga5u (resize the right pane to see it in action)

Again, you'll have to tweak to get your exact needs, but this should be much closer to what you need. Good luck!

6
  • i basically want the navigation bar to be for the desktop version with the navigation links showing instead of being hidden withing the navicon icon for the menu that's responsive Jan 1, 2014 at 4:58
  • i tried the following it didnt work. basically i want the navigation bar to be uncollapsed and set across as if it was for a desktop version, mobile first to desktop responsively when i set the media query at min-width: 480 pixels thanks for the help though, i appreciate it. Jan 1, 2014 at 5:04
  • You should edit your question to be more clear. So what you really want is that it works like your example < 480px, but you want a full width horizontal nav bar that's visible all the time and the button hidden when the browser is wider? Jan 1, 2014 at 5:07
  • ya i edited my question thanks. ya when it reaches 480 pixels i want it to display it as a regular navigation showing the links on the same line not stacked, and ya the navicon hidden when it reaches a min width at 480 pix for the media query im setting for it. i know you can use inline block or float them i have had practice with floating items. havent used inline-block though. Jan 1, 2014 at 5:14
  • ahh my man thank you, yes its very close to what i want the only problem is there seems to be a weird effect when u re-size the browser. it kind of shows the navigation links flash under it for a few seconds. thanks again for the help i would vote up on ur answer but i need 15 rep points lol. happy new year dude. Jan 1, 2014 at 5:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.