How do I align icons in navbar

user_15008832 0
Viewed 589

So basically I want to be able to align my icons in my navbar but they are staying on the left, the icons are meant to be on the same line and centered when the sidebar is opened.

As you can see they are staying on the left

Image: https://i.stack.imgur.com/8n3WO.png

If you wanna see what i mean by having the icons align on same line and be centered, check Tom Walkers navbar below

https://iamtomwalker.com

Navbar code:

session_start();
?>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="./css/navbar.css?d=<?php echo time(); ?>">
<link rel="stylesheet" type="text/css" href="./css/style.css?d=<?php echo time(); ?>">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>


<nav class="navbar"> 
 <span class="navbar-toggle" id="js-navbar-toggle"> 
     <i class="material-icons">menu</i> 
 </span> 
   <a href="#" class="logo">Test</a> 
     <ul class="main-nav" id="js-menu"> 
         <li><a href="../home" class="nav-links">Home</a></li> 
         <li><a href="../covers" class="nav-links">Covers</a></li> 
         <li><a href="../music" class="nav-links">Music</a></li> 
         <li><a href="../newsletter" class="nav-links">Newsletter</a></li> 
         <li style="display: inline-block;text-align: center; clear:left;"><a href="../newsletter" class="nav-links socials"><i class="material-icons">menu</i> </a></li>  
         <li style="display: inline-block;text-align: center; clear:left;"><a href="../newsletter" class="nav-links socials"><i class="material-icons">menu</i> </a></li>   
         <?php
         if(isset($_SESSION['logged_in'])){
         echo '<li><a href="../account" class="nav-links">Account</a></li> ';
         echo '<li><a href="../manage" class="nav-links">Manage</a></li> ';
         echo '<li><a href="../actions/logout.php" class="nav-links">Logout</a></li> ';
         } 
?>
         
     </ul> 
</nav> 

<script>
 let mainNav = document.getElementById("js-menu"); 
 let navBarToggle = document.getElementById("js-navbar-toggle");
 navBarToggle.addEventListener("click", function() {
 mainNav.classList.toggle("active");
 });
</script>

Navbar CSS

@import url('https://fonts.googleapis.com/css2?family=Fredericka+the+Great&display=swap');

* { 
box-sizing: border-box;
padding: 0;
margin: 0;
 } 
 
.navbar { 
 font-size: 18px;
 background-color: #151515;
 padding-bottom: 10px;
 border-bottom: 1px solid white;
 } 
 
.main-nav { 
 list-style-type: none;
 display: none;
 clear: left;
 } 

.nav-links, .logo { 
 text-decoration: none;
 font-family: 'Fredericka the Great', cursive;
 color: rgba(255, 255, 255, 0.7);
 }

 .nav-links:hover{ 
 text-decoration: underline;
 }
 
.main-nav li { 
 text-align: center;
 margin: 15px auto;
 } 

.logo { 
 display: inline-block;
 font-size: 22px;
 margin-top: 10px;
 margin-left: 20px;
 }
 
.navbar-toggle { 
 position: absolute;
 top: 10px;
 right: 20px;
 cursor: pointer;
 color: rgba(255, 255, 255, 0.8);
 font-size: 24px;
 } 
 
.active { 
 display: block;
 } 
 
 @media screen and (min-width: 768px) { 
 .navbar {
 display: flex;
 justify-content: space-between;
 padding-bottom: 0;
 height: 70px;
 align-items: center;
 } 
 
.main-nav { 
 display: flex;
 margin-right: 30px;
 flex-direction: row;
 justify-content: flex-end;
 }

 .main-nav li { 
 margin: 0;
 }
 
.nav-links { 
 margin-left: 40px;
 } 
 
.logo { 
 margin-top: 0;
 } 
 
.navbar-toggle { 
 display: none;
 } 
 
.logo:hover, .nav-links:hover { 
color: rgba(255, 255, 255, 1);
 }```

  


  [1]: https://iamtomwalker.com
navbar css html
2 Answers

A few ways to do this, but most simply, add display: inline, and float: left to your li css

.main-nav li {
  display: inline;
  float: left;
  margin: 15px auto;
}

Display inline will make the list items no longer block elements, and they will fall in place, side by side. Floating will just put them all to either side of the parent. You can set your spacing from here.

https://jsfiddle.net/ywk1cd5h/6/

user_150088890

I would look to wrap the icons that you want to be within a straight line in another flex box container.

<ul class="main-nav" id="js-menu"> 
         <li><a href="../home" class="nav-links">Home</a></li> 
         <li><a href="../covers" class="nav-links">Covers</a></li> 
         <li><a href="../music" class="nav-links">Music</a></li> 
         <li><a href="../newsletter" class="nav-links">Newsletter</a></li> 
         <div class="icons">
             <li style="text-align: center; "><a href="../newsletter" class="nav-links socials"><i class="material-icons">menu</i> </a></li>  
             <li style="text-align: center;"><a href="../newsletter" class="nav-links socials"><i class="material-icons">menu</i> </a></li> 
         </div>
</ul>

And then center the content. You can also adjust the margin: 15px auto as well.

.icons {
  display: flex;
  justify-content: center;
}

.main-nav { 
    display: flex;
    margin-right: 30px;
    flex-direction: row;
    justify-content: flex-end;
}

.main-nav li { 
    text-align: center;
    margin: 15px 0;
}
user_87766440
Related