Mobile navigation

I don’t know what I’m doing wrong. It’s not working as intended. Just disappears when clicked, and I can’t click it again to open it.

<div id="sidebarwrap">
  <button id="menu">⪢</button> 
    <nav class="nav">
          <ol>
            <li><a href="https://iwriteonwheels.tumblr.com/">Home</a></li>
            <li><a href="/archive">Archive</a></li>
            <li><a href="/aboutme">About Me</a></li>
            <li><a href="/anime">Anime</a></li>
            <li><a href="https://iwriteonwheels.tumblr.com/yearoutlook">My Yearly Outlook</a></li>
          </ol>
    </nav>
    <div class="swrapper">
        <div class="search">
        <input type="text" onfocus="this.value=''" placeholder="Search blog..." id="search"/>
        </div>
        <div class="layer"><input class="testinput" id="tap" type="submit" name="b1" value="🔍︎" />
        </div>
    </div>
</div>
body {
  background:#aaa;
}

.nav {
  text-transform: capitalize;
  font-family: Fertigo Pro, Segoe UI, Arial, Verdana;
  font-size: 1rem;
  font-weight: 900;
}
.nav ol {
  max-width:47%;
  text-align:left;
  list-style: none;
  padding: 0 auto;
  display: flex;
  flex-wrap:wrap;
  flex-direction:column;
  background: none;
}
.nav li {
  display: inline-block;
} 
.nav a {
  color: rgba(153,153,153,0.5);
  font-weight: 900;
  transition-duration: 0.3s;
  transition-timing-function: linear, ease-in-out;
  text-decoration: none;
}
.nav a:hover {
  color: #fff;
  text-transform: capitalize;
  text-shadow: rgb(145, 71, 67) 2px 0px 0px,
    rgb(145, 71, 67) 1.75517px 0.958851px 0px,
    rgb(145, 71, 67) 1.0806px 1.68294px 0px,
    rgb(145, 71, 67) 0.141474px 1.99499px 0px,
    rgb(145, 71, 67) -0.832294px 1.81859px 0px,
    rgb(145, 71, 67) -1.60229px 1.19694px 0px,
    rgb(145, 71, 67) -1.97999px 0.28224px 0px,
    rgb(145, 71, 67) -1.87291px -0.701566px 0px,
    rgb(145, 71, 67) -1.30729px -1.51361px 0px,
    rgb(145, 71, 67) -0.421592px -1.95506px 0px,
    rgb(145, 71, 67) 0.567324px -1.91785px 0px,
    rgb(145, 71, 67) 1.41734px -1.41108px 0px,
    rgb(145, 71, 67) 1.92034px -0.558831px 0px, 0px 0px 24px black;
}
.nav a:active,
.nav a:focus {
  color: #aaa;
  text-transform: capitalize;
  outline: 0;
}
.nav a.current {
  background: none;
  color: #fff;
  text-shadow: rgb(145, 71, 67) 2px 0px 0px,
    rgb(145, 71, 67) 1.75517px 0.958851px 0px,
    rgb(145, 71, 67) 1.0806px 1.68294px 0px,
    rgb(145, 71, 67) 0.141474px 1.99499px 0px,
    rgb(145, 71, 67) -0.832294px 1.81859px 0px,
    rgb(145, 71, 67) -1.60229px 1.19694px 0px,
    rgb(145, 71, 67) -1.97999px 0.28224px 0px,
    rgb(145, 71, 67) -1.87291px -0.701566px 0px,
    rgb(145, 71, 67) -1.30729px -1.51361px 0px,
    rgb(145, 71, 67) -0.421592px -1.95506px 0px,
    rgb(145, 71, 67) 0.567324px -1.91785px 0px,
    rgb(145, 71, 67) 1.41734px -1.41108px 0px,
    rgb(145, 71, 67) 1.92034px -0.558831px 0px, 0px 0px 24px black;
}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */ /* my phone is at 257px screen width or 68mm */
.nav {
  text-transform: capitalize;
  font-family: Fertigo Pro, Segoe UI, Arial, Verdana;
  font-weight: 900;
  text-align:center;
}

.nav ol {
  max-width:45%;
  text-align:left;
  list-style: none;
  padding: 0 auto;
  display: flex;
  flex-wrap:wrap;
  flex-direction:column;
  background: none;
  line-height:3em;
  position: fixed;
  top: 4em;
  left: 0;
  right: 0;
}

.nav li {
  display: inline-block;
}

.nav a {
  color: rgba(153,153,153,0.5);
  font-family: Fertigo Pro, Segoe UI, Arial, Verdana;
  font-weight: 900;
  transition-duration: 0.3s;
  transition-timing-function: linear, ease-in-out;
  text-decoration: none;
}

.nav a.current {
  background: none;
  color: #fff;
  text-shadow: rgb(145, 71, 67) 2px 0px 0px,
    rgb(145, 71, 67) 1.75517px 0.958851px 0px,
    rgb(145, 71, 67) 1.0806px 1.68294px 0px,
    rgb(145, 71, 67) 0.141474px 1.99499px 0px,
    rgb(145, 71, 67) -0.832294px 1.81859px 0px,
    rgb(145, 71, 67) -1.60229px 1.19694px 0px,
    rgb(145, 71, 67) -1.97999px 0.28224px 0px,
    rgb(145, 71, 67) -1.87291px -0.701566px 0px,
    rgb(145, 71, 67) -1.30729px -1.51361px 0px,
    rgb(145, 71, 67) -0.421592px -1.95506px 0px,
    rgb(145, 71, 67) 0.567324px -1.91785px 0px,
    rgb(145, 71, 67) 1.41734px -1.41108px 0px,
    rgb(145, 71, 67) 1.92034px -0.558831px 0px, 0px 0px 24px black;
}

.columns {
    flex-direction: column;
  }
  .column {
    margin: 0.625em 0;
  }
  
  .main-column {
    order: -1;
  }
  
  /* for search icon background hover */

.layer {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#8000ff), to(#5500aa),color-stop(0.4, #220000));
    width: 30px;
    height: 25px;
    position:absolute;
    top:5px;
    left:240px;
    z-index:25000;
    transition:  all 0.4s ease-in-out;
    border:0px solid red;
}

.layer:active {

transform: scale(0.95);

}

.layer:hover {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ba72ba), to(#2200ff),color-stop(0.4, #7a2312));
    width: 30px;
    height: 25px;
    position:absolute;
    top:5px;
    left:240px;
    z-index:25000;
    webkit-transition: 0.4s; /* Animation */
    transition:  0.4s; /* Animation */
    transition:  all 0.4s ease-in-out;
}

#f1 input[value="🔍︎"] {
    background-image: linear-gradient(to bottom right, #fff, #000);
    background-clip:text;
    -webkit-text-stroke: 1px transparent;
    color:transparent;
}

#f1 input[type=submit] {
    background-image: linear-gradient(to bottom right, #fff 25%, #000);
    border: 1px solid #666;
    width: 40px;
    height: 32px;
    top:-3.5px;
    left:-4.5px;
    position:relative;
    z-index:4;
    font-size:1.313em;
    padding-left:5px;
    padding-bottom:5px;
    transition: all 0.4s ease-in-out;
    -webkit-text-stroke: 1px transparent;

}

#f1 input[type=submit]:hover {
    background-image: linear-gradient(to bottom right, #fff 25%, magenta);
    border: 1px solid #666;
    width: 40px;
    height: 32px;
    top:-3.5px;
    left:-4.5px;
    position:relative;
    z-index:4;
    font-size:1.313em;
    padding-left:5px;
    padding-bottom:5px;
    -webkit-text-stroke: 1px transparent;

}

/* for search icon hover */

.testinput {
    background-image: linear-gradient(to bottom right, #fff, #000);
    background-clip: text;
    -webkit-text-stroke: 1px transparent;
    border:none;
    font-size:1.313em;
    color:transparent;
    webkit-transition: 0.4s; /* Animation */
    transition: 0.4s; /* Animation */
    transition: all 0.4s ease-in-out;
    top:-3.5px;
    left:-3px;
    position:relative;
 
}

.testinput:hover {
    background-image: linear-gradient(to bottom right, #fff, magenta);
    background-clip: text;
    -webkit-text-stroke: 1px transparent;
    border:none;
    font-size:1.313em;
    color:transparent;
    top:-3.5px;
    left:-3px;
    position:relative;
 
}

.swrapper {
    background-image: linear-gradient(to bottom right, #201, #a0f);
    width:50%;
    height:35px;
    position:fixed;
    bottom:564px;
    left:0px;
    z-index:15000;
    display:flex;
   
}

.search input{
  background:#fff;
  padding:1px 5px;
  border:1px solid #999fcf;
  width:237px;
  height:20px;
  border-right:none;
  border-radius: 15px 0 0 15px;
  color:#aaa;
  z-index:15000;
  transition:all .4s ease-in-out;
  box-shadow:inset 4px 6px 8px -5px #777;
  position:absolute;
   top:6px;
   left:2px;
   outline:none;

}

.search input:focus{
    color: #000;
    background:#ddd;
    caret-color:#000;
    z-index:15000;
    outline:none;
 
}
  
  #sidebarwrap {
    display:block; 
    border:none;
    background:black; 
    width:50%;
    height:100%;
    position:fixed;
    left:0;
    top:0;
  } 
  
  #menu {
    background:black;
    width:5%;
    height:5.7%;
    cursor:pointer;
    border:3px solid black;
    filter: drop-shadow(1px 1px 5px #000);
    position:fixed;
    top:40px; 
    left:380px; 
    color:goldenrod;
}
$('#menu').click(function(){ 
  
   $('#sidebarwrap').add('#menu').animate({width: 'toggle'});
});

My first thought was maybe wrappers, but I already have one for the whole thing.

Please don’t ever do this:

.nav a:active,
.nav a:focus {
  outline: 0;
}

Removing the outline on links - anywhere, not just the main menu - makes it difficult if not impossible for keyboard navigators to see where they are. The outline is there for a reason. Unless you replace it with something equally clear and unambiguous, please leave it alone.

4 Likes

@TechnoBear ok, I’m sorry. I’m just not liking it. Never have. What can I replace it with?

It’s not a question of whether you like it or not. It’s about helping your visitors navigate your site.

4 Likes

Please see this article:

https://webaim.org/techniques/hypertext/link_text#appearance

2 Likes

@Gandalf I can set the links such that when you’re on one, it will stay highlighted. Just as I have done on my desktop site.

@TechnoBear thanks I’ll take a look.

@TechnoBear is it possible to have the outline just on one side, like border-bottom ?

I’m assuming that this also needs an outline :

.search input:focus{
    color: #000;
    background:#ddd;
    caret-color:#000;
    z-index:15000;
    outline:none;
 
}

If you read the article I linked to above, then you’ll have seen that all links should be underlined, to indicate they are links. How would your proposed method show which link is in focus?

1 Like

@TechnoBear yes I saw that actually in Chris Coyier’s article when I Googled for alternatives.

Finally got everything working, except now, the button will not move over along with the whole sidebar. Not sure what’s going on. Here’s the code again

<div id="sidemenuwrap">
  <button id="btn"><div class="arrow">⪢</div></button> 
    <nav class="nav">
          <ol>
            <li><a href="https://iwriteonwheels.tumblr.com/">Home</a></li>
            <li><a href="/archive">Archive</a></li>
            <li><a href="/aboutme">About Me</a></li>
            <li><a href="/anime">Anime</a></li>
            <li><a href="https://iwriteonwheels.tumblr.com/yearoutlook">My Yearly Outlook</a></li>
          </ol> 
    </nav>
    <div class="swrapper">
        <div class="search">
        <input type="text" onfocus="this.value=''" placeholder="Search blog..." id="search"/>
        </div>
        <div class="layer"><input class="testinput" id="tap" type="submit" name="b1" value="🔍︎" />
        </div>
    </div>
</div>
body {
  background:#a47;
}

.nav {
  text-transform: capitalize;
  font-family: Fertigo Pro, Segoe UI, Arial, Verdana;
  font-size: 1rem;
  font-weight: 900;
}
.nav ol {
  max-width:47%;
  text-align:left;
  list-style: none;
  padding: 0 auto;
  display: flex;
  flex-wrap:wrap;
  flex-direction:column;
  background: none;
}
.nav li {
  display: inline-block;
} 
.nav a {
  color: rgba(153,153,153,0.5);
  font-weight: 900;
  text-decoration: none;
}
.nav a:hover {
  color: #fff;
  text-transform: capitalize;
  text-shadow: rgb(145, 71, 67) 2px 0px 0px,
    rgb(145, 71, 67) 1.75517px 0.958851px 0px,
    rgb(145, 71, 67) 1.0806px 1.68294px 0px,
    rgb(145, 71, 67) 0.141474px 1.99499px 0px,
    rgb(145, 71, 67) -0.832294px 1.81859px 0px,
    rgb(145, 71, 67) -1.60229px 1.19694px 0px,
    rgb(145, 71, 67) -1.97999px 0.28224px 0px,
    rgb(145, 71, 67) -1.87291px -0.701566px 0px,
    rgb(145, 71, 67) -1.30729px -1.51361px 0px,
    rgb(145, 71, 67) -0.421592px -1.95506px 0px,
    rgb(145, 71, 67) 0.567324px -1.91785px 0px,
    rgb(145, 71, 67) 1.41734px -1.41108px 0px,
    rgb(145, 71, 67) 1.92034px -0.558831px 0px, 0px 0px 24px black;
}
.nav a:active,
.nav a:focus {
  color: #aaa;
  text-transform: capitalize;
  outline: 2px dotted goldenrod;
}
.nav a.current {
  background: none;
  color: #fff;
  text-shadow: rgb(145, 71, 67) 2px 0px 0px,
    rgb(145, 71, 67) 1.75517px 0.958851px 0px,
    rgb(145, 71, 67) 1.0806px 1.68294px 0px,
    rgb(145, 71, 67) 0.141474px 1.99499px 0px,
    rgb(145, 71, 67) -0.832294px 1.81859px 0px,
    rgb(145, 71, 67) -1.60229px 1.19694px 0px,
    rgb(145, 71, 67) -1.97999px 0.28224px 0px,
    rgb(145, 71, 67) -1.87291px -0.701566px 0px,
    rgb(145, 71, 67) -1.30729px -1.51361px 0px,
    rgb(145, 71, 67) -0.421592px -1.95506px 0px,
    rgb(145, 71, 67) 0.567324px -1.91785px 0px,
    rgb(145, 71, 67) 1.41734px -1.41108px 0px,
    rgb(145, 71, 67) 1.92034px -0.558831px 0px, 0px 0px 24px black;
}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */ /* my phone is at 257px screen width or 68mm */
.nav {
  text-transform: capitalize;
  font-family: Fertigo Pro, Segoe UI, Arial, Verdana;
  font-weight: 900;
  text-align:center;
}

.nav ol {
  max-width:44.8%;
  text-align:left;
  list-style: none;
  padding: 0 auto;
  display: flex;
  flex-wrap:wrap;
  flex-direction:column;
  background: #662200;
  line-height:3em;
  position: fixed;
  top: 3.7em; 
  left: 0;
  right: 0;
}

.nav li {
  display: inline-block;
}

.nav a {
  color: rgba(153,153,153,0.5);
  font-family: Fertigo Pro, Segoe UI, Arial, Verdana;
  font-weight: 900;
  transition-duration: 0.3s;
  transition-timing-function: linear, ease-in-out;
  text-decoration: none;
}

.nav a.current {
  background: none;
  color: #fff;
  text-shadow: rgb(145, 71, 67) 2px 0px 0px,
    rgb(145, 71, 67) 1.75517px 0.958851px 0px,
    rgb(145, 71, 67) 1.0806px 1.68294px 0px,
    rgb(145, 71, 67) 0.141474px 1.99499px 0px,
    rgb(145, 71, 67) -0.832294px 1.81859px 0px,
    rgb(145, 71, 67) -1.60229px 1.19694px 0px,
    rgb(145, 71, 67) -1.97999px 0.28224px 0px,
    rgb(145, 71, 67) -1.87291px -0.701566px 0px,
    rgb(145, 71, 67) -1.30729px -1.51361px 0px,
    rgb(145, 71, 67) -0.421592px -1.95506px 0px,
    rgb(145, 71, 67) 0.567324px -1.91785px 0px,
    rgb(145, 71, 67) 1.41734px -1.41108px 0px,
    rgb(145, 71, 67) 1.92034px -0.558831px 0px, 0px 0px 24px black;
}

.columns {
    flex-direction: column;
  }
  .column {
    margin: 0.625em 0;
  }
  
  .main-column {
    order: -1;
  }
  
  /* for search icon background hover */

.layer {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#8000ff), to(#5500aa),color-stop(0.4, #220000));
    width: 30px;
    height: 25px;
    position:absolute;
    top:5px;
    left:240px;
    z-index:25000;
    transition:  all 0.4s ease-in-out;
    border:0px solid red;
}

.layer:active {

transform: scale(0.95);

}

.layer:hover {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ba72ba), to(#2200ff),color-stop(0.4, #7a2312));
    width: 30px;
    height: 25px;
    position:absolute;
    top:5px;
    left:240px;
    z-index:25000;
    webkit-transition: 0.4s; /* Animation */
    transition:  0.4s; /* Animation */
    transition:  all 0.4s ease-in-out;
}

#f1 input[value="🔍︎"] {
    background-image: linear-gradient(to bottom right, #fff, #000);
    background-clip:text;
    -webkit-text-stroke: 1px transparent;
    color:transparent;
}

#f1 input[type=submit] {
    background-image: linear-gradient(to bottom right, #fff 25%, #000);
    border: 1px solid #666;
    width: 40px;
    height: 32px;
    top:-3.5px;
    left:-4.5px;
    position:relative;
    z-index:4;
    font-size:1.313em;
    padding-left:5px;
    padding-bottom:5px;
    transition: all 0.4s ease-in-out;
    -webkit-text-stroke: 1px transparent;

}

#f1 input[type=submit]:hover {
    background-image: linear-gradient(to bottom right, #fff 25%, magenta);
    border: 1px solid #666;
    width: 40px;
    height: 32px;
    top:-3.5px;
    left:-4.5px;
    position:relative;
    z-index:4;
    font-size:1.313em;
    padding-left:5px;
    padding-bottom:5px;
    -webkit-text-stroke: 1px transparent;

}

/* for search icon hover */

.testinput {
    background-image: linear-gradient(to bottom right, #fff, #000);
    background-clip: text;
    -webkit-text-stroke: 1px transparent;
    border:none;
    font-size:1.313em;
    color:transparent;
    webkit-transition: 0.4s; /* Animation */
    transition: 0.4s; /* Animation */
    transition: all 0.4s ease-in-out;
    top:-3.5px;
    left:-3px;
    position:relative;
  
}

.testinput:hover {
    background-image: linear-gradient(to bottom right, #fff, magenta);
    background-clip: text;
    -webkit-text-stroke: 1px transparent;
    border:none;
    font-size:1.313em;
    color:transparent;
    top:-3.5px;
    left:-3px;
    position:relative;
 
}

.swrapper {
    background-image: linear-gradient(to bottom right, #201, #a0f);
    width:50%;
    height:35px;
    position:fixed;
    bottom:564px;
    left:0px;
    z-index:15000;
    display:flex;
   
}

.search input{
  background:#fff;
  padding:1px 5px;
  border:1px solid #999fcf;
  width:237px;
  height:20px;
  border-right:none;
  border-radius: 15px 0 0 15px;
  color:#aaa;
  z-index:15000;
  transition:all .4s ease-in-out;
  box-shadow:inset 4px 6px 8px -5px #777;
  position:absolute;
   top:6px;
   left:2px;
   outline:none;

}

.search input:focus{
    color: #000;
    background:#ddd;
    caret-color:#000;
    z-index:15000;
    outline:none;
 
}
  
  #sidemenuwrap {
    display:block; 
    border:none;
    background:black; 
    width:50%;
    height:100%;
    position:fixed;
    left:0;
    top:0;
  }
  
  #btn {
    display:block; 
    background:black;
    width:5%; 
    height:5.7%;
    cursor:pointer;
    border:3px solid black;
    filter: drop-shadow(1px 1px 5px #000); 
    position:fixed;
    top:40px; 
    left:380px;
}
  
  .arrow {
    font-size:1.5em;
    color:goldenrod;
    position:fixed;
    top:0.1em;
    left:0.6em;
    
  }

$('#btn').on('click', function(){
    var flag = $(this).data('flag'); 

   $('#sidemenuwrap').add('ol').add('.swrapper').animate({left: flag ? -385: 0}, 500); 

   $(this).data('flag', !flag);
});

I tried adding the button’s css to the JS like this .add('#btn'), but it didn’t do anything. Still looking into it.

Ok just fixed it. I changed position:fixed to :relative

Did you validate the code?

You can’t place a <div> inside a <button>. I’d also question your use of an ordered list <ol> rather than the usual unordered list <ul> for your navigation. An ordered list implies that there is significance in the order of the items, such as steps in a recipe.

I’m not familiar with code validation yet. I know how it works now, but not really using it just yet. It seems to scare me.

I have the

    on my blog as well though…

    <nav class="nav">
    <ol>
    <li><a href="[https://iwriteonwheels.tumblr.com/](view-source:https://iwriteonwheels.tumblr.com/)">Home</a></li>
    <li><a href="[/archive](view-source:https://iwriteonwheels.tumblr.com/archive)">Archive</a></li>
    <li><a href="[/aboutme](view-source:https://iwriteonwheels.tumblr.com/aboutme)">About Me</a></li>
    <li><a href="[/anime](view-source:https://iwriteonwheels.tumblr.com/anime)">Anime</a></li>
    <li><a href="[https://iwriteonwheels.tumblr.com/yearoutlook](view-source:https://iwriteonwheels.tumblr.com/yearoutlook)">My Yearly Outlook</a></li>
    </ol>
    </nav>
    

    You can’t place a <div> inside a <button> .

    Ok so how to work that out?

Button is inside <div>, not <div> inside button.

<div id="sidemenuwrap">
  <button id="btn">⪢</button>

I would think that this is ok? It’s inside a wrapper even.

If you use it frequently, as we keep advising you, then you can pick up on errors when there are only one or two and they’re much easier to sort out. Often it may be something as simple as a typo. Running away will not help. It will not magically get easier at some future date. Validate your code, and if you don’t understand an error message, then ask on the forums. The more you do this, the easier it will become.

This is the code you posted:

This is the code you posted:

Ok so when I did, it works as I expect it to. I could open and close the menu. When putting it out of the div, I can’t do that.

Let me try again.

This line is invalid, because you cannot have a <div> inside a <button>.

 <button id="btn"><div class="arrow">⪢</div></button> 

Pay particular attention to the “permitted content” section.

1 Like

Pay particular attention to the “permitted content” section.

Ok so looks like I can use the <a> tag instead.

Why does that seem to you the most appropriate choice?

(I’m not clear why you need the extra element in there at all.)