• Locked
1 reply [Last post]
Mon, 2017-03-27 21:58
InspectorPocket
InspectorPocket's picture
Offline
newbie
Last seen: 5 years 44 weeks ago
Timezone: GMT+1
Joined: 2017-03-27
Posts: 1
Points: 2

Hey! I have just recently made my web page responsive. When the page gets to 610px, the style of the navigation changes. Everything works just as I expected. However the responsive nav-bar only appears when the page size changes. I would like it to stay hidden until the button '#mob-menu' is pressed under '.mob-nav'.

index.html:

<div class="mob-menu">
 
  <a class="ml-active" href="index.html">
    <div class="logo">
       <div class="logo-inner">
	  <img src="img/_icons/alder_icon.svg">
	  <img src="img/_icons/willow_icon.svg">
	  <img src="img/_icons/oak_icon.svg">
       </div>
       <h3>Home</h3>
     </div>
  </a>
 
</div>
 
<nav class="global-nav">
  <div class="inner">
 
    <div class="mob-nav">
      <div class="mob-nav-inner">
	<a id="mob-menu">
	  <h3>&#9783;</h3>
	</a>
      </div>
    </div>
 
  </div>

SCSS main.scss:

.mob-menu
{
  position: absolute;
  left: 1000px;
  visibility: hidden;
  opacity: 0;
  z-index: 2000;
  width: 90vw;
  height: 90vh;
  margin: 2.5vh;
  background-color: #fff;
  border: $one-border;
  font-family: $main-font;
  overflow: hidden;
 
.mob-nav
{
  visibility: 0;
  opacity: 0;
  position: absolute;
  width: 100%;
  text-align: center;
  .mob-nav-inner
  {
    position: absolute;
    right: 10px;
    a
    {
      padding: 5px;
      cursor: pointer;
      text-decoration: none;
      color: $hovercolor;
      &:active
      {
	&.mob-menu
	{
	  opacity: 1;
          visibility: visible;
	}
      }
    }
  }
}

SASS media.scss:

@media (max-width: 610px) 
{
  .mob-menu
  {
    position: fixed;
    left: 0;
    visibility: visible;
    opacity: 1;
    top: 0;
    @include transition (0.3s ease-in-out);
  }
  .mob-nav
  {
    visibility: 1;
    opacity: 1;
    position: relative;
    &:hover
    {
      .mob-menu
      {
        visibility: hidden;
	opacity: 0;
      }
    }
  }
}
</code
 
I have tried this: 
<code>
.mob-nav
{
  &:active
  {
    .mob-menu
    {
      visibility: visible;
      opacity: 1;
    }
  }
}

And removed the code from the media style sheet, but I can't seem to figure out why it won't change.

If anyone has and input on the subject it would be really appreciated! Thanks.

Top
Tags:
Mon, 2017-04-03 22:02
#1
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 4 days 14 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Hi InspectorPocket, You

Hi InspectorPocket,
You probably need to use the target pseudo class https://csscreator.com/content/target

Give the <div class="mob-menu"> an id <div id ="themenu" class="mob-menu">

Then in the button link add the href="#themenu"

Then in your style add something like:

#themenu:target{
  // styles to show the menu.
  left: 0;
  visibility: visible;
  opacity: 1;
 top: 0;
// ...
}

Top
  • Locked