how I can get hambergur menu 3 lines little closer to each other in height?

  • Resolved johannes999

    (@johannes999)


    1 year, 7 months ago

    Hallo,

    I have hamburger menu .

    the html code is :

      <div class="navigation">
	<div class="menu">
		
		
	    <span></span>	
		<span></span>
		<span></span>
	
	  
		</div>

			
		
      <div class="menu-bar">	
 
    <ul>
      <li><a href=class="menu-link">Home</a></li>
		<li><a href= class="menu-link">onderhoud</a></li>
		<li><a href= class="menu-link">banden</a></li>
		<li><a href= class="menu-link">apk</a></li>
      <li><a href="https/" class="menu-link">Contact</a></li>
    </ul>        
		</div>
		
				</div>

    and this is CSS:

    	.menu {
position:fixed;
width:45px;
height:45px;
cursor:pointer;
z-index:1;


}


.menu span {
width:25px;
height:3px;
background:#ffd978;
position:absolute;
display:block;
top: calc(50% - 1.5px);
left: calc(50% - 12.5px);
transition:0.5s;	


}

    I have tried everything to get those span 3 lines litle closer to each othe .

    I tried top margin was wrong . I tried line-height it didn’t help.

    I want this hamburger menu 3 lines in height litle closer to each other.

    is this possible ? I looked in w3School with this example :

    <style>
div {
  width: 35px;
  height: 5px;
  background-color: black;
  margin: 6px 0;
}
</style>
</head>
<body>

<p>A menu icon:</p>

<div></div>
<div></div>
<div></div>

</body>
</html

    but it didn’t help either.

    can some one tell me if is that possible with my code above to get hamburger menu 3 lines little closer to each other?

    thanks

    • This topic was modified 1 year, 7 months ago by johannes999.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • The CSS that you’ve shown here isn’t what controls the gaps between the lines. ?? Check out line 1003 and line 1008 in your style.css file…

    .menu span:nth-child(1) {
	transform: translatey(-10px);
}
.menu span:nth-child(3) {
	transform: translatey(10px);
}

    Change the pixel values in there and you’ll see a difference.

    • This reply was modified 1 year, 7 months ago by catacaustic.

    Hi @johannes999 You can use hamburger font awesome icon and you don’t need to do anything like that

    Thread Starter johannes999

    (@johannes999)

    thanks,

    I changed both value from 10 to :

    .menu span:nth-child(1) {
	transform: translatey(-8px);
}
.menu span:nth-child(3) {
	transform: translatey(8px);
}

    and it works .

    thank you very much.

    thanks alithew for your advice.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘how I can get hambergur menu 3 lines little closer to each other in height?’ is closed to new replies.