Flex alignment issues - align links on navbar with left and right aligned items

Hello,

I am creating a navbar using Bootstrap and Flex.

I currently have the navigation working to some extent, but what I am trying to achieve isn’t working.

What I am trying to do is have the logo in the middle with two sets of nav links to the left and right of the logo, with the left links aligned to the right of the logo and the links to the right aligned to the left.

Then I am trying to align the telephone to the far left and the CTA to the far right, but I can’t work out how to do this.

I have tried playing around with flex-end and flex-start, but it’s not working.

This is a fiddle of what I have.
https://jsfiddle.net/toolman/s0om764j/1/

Can anyone suggest how I can achieve the above?

Thank you :slight_smile:

Does the html have to remain the same as it would be easier with the logo as a sibling of the links and not absolutely placed into position from somewhere else?

Then it would just be a case of centring the logo and 4 links while pushing first and last items to either side (which is easily achieved in Flexbox by using auto margins on one side of each element which pushes the element as far as it can go in the opposite direction).

Ok assuming the html has to remain the same (apart from a couple of extra classes) then you can do it like this but relies on magic numbers a bit.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
/*
####################################################
MAIN NAV
####################################################
*/



.logo {
	width: 170px;
	height: 170px;
	border-radius: 50%;
	/* font-size: 20px; */
    color: #fff;
	line-height: 100px;
	text-align: center;
	background: #353564;
	display: flex;
	justify-content: center;
	align-items: center;
}
.logo img {
	position: relative;
	top: -8px;
}
.main-nav {
	position: sticky;
	top: 0;
	z-index: 1000;
	padding: 10px 15px;
}
.main-nav .navbar {
	padding: 40px 15px
}
.main-nav .navbar li.nav-item:first-of-type {
	padding-left: 0
}
.main-nav .navbar li.nav-item {
	padding-left: 25px
}
.main-nav .navbar li.nav-item a {
	padding: 0;
	color: #353564;
	font-size: 18px;
	text-transform: uppercase;
	font-weight: 500;
	letter-spacing: 1px;
	transition: all 0.3s ease;
	border-bottom: 1px solid transparent
}
.main-nav .navbar li.nav-item a:hover {
	border-bottom: 1px solid #fff
}




/* Main nav */
@media (min-width: 990px) {
	.navbar-brand {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
	.midnav{margin-right:90px}/* half logo size */
	.midnav2{margin-left:90px}/* half logo size */
	.telephone,.cta{width:7rem;}
	.cta{text-align:right;}
}
</style>
</head>

<body>
<!-- MAIN NAV -->
<div class="container-fluid main-nav ">
  <div class="row">
    <div class="container">
      <nav id="topNav" class="navbar  navbar-expand-lg">
        <div class="navbar-brand mx-auto logo"> <a href="#"> LOGO </a> </div>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse"> <span>Menu</span> <i class="fas fa-bars"></i> </button>
        <div class="navbar-collapse collapse">
          <div class="telephone mr-auto">Call us today</div>
          <ul class="navbar-nav midnav">
            <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li>
            <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li>
          </ul>
          <ul class="navbar-nav midnav2">
            <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li>
            <li class="nav-item"> <a class="nav-link" href="#">Link 4</a> </li>
          </ul>
          <div class="cta ml-auto">CTA</div>
        </div>
      </nav>
    </div>
  </div>
</div>
<!-- end MAIN NAV --> 

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

The [point being is that as the logo is absolutely placed to the middle then you need to create space for it using the same measurement as the logo. I’ve used a 90px margin on each side of the ul that sits to the side of the logo and that preserves the space.

Note that because your telephone and cta elements are different widths (because they are content width) then there is no way to centre the 4 links in the middle of the page while having variable width content at either end. This is an issue that has never properly been solved via css in that elements are generally centred as a block so you can’t centre one element and then have variable width content either side and keep all in the normal flow.

The answer to this in the code above is simply to give the left and right items the same width and then the whole nav will centre properly.

Using the code I have shown above will result in this display.

I have not addressed the small screen layout as I assume this is a work in progress.

As I said in the other post if bootstrap was not being used I would have made this as one list with the logo as the middle list item and then it all becomes simpler. :slight_smile:

We can make it a little simpler in bootstrap if you don;t mind changing the html a little.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
/*
####################################################
MAIN NAV
####################################################
*/



.logo {
	width: 170px;
	height: 170px;
	border-radius: 50%;
	/* font-size: 20px; */
    color: #fff;
	line-height: 100px;
	text-align: center;
	background: #353564;
	display: flex;
	justify-content: center;
	align-items: center;
}
.logo img {
	position: relative;
	top: -8px;
}
.main-nav {
	position: sticky;
	top: 0;
	z-index: 1000;
	padding: 10px 15px;
}
.main-nav .navbar {
	padding: 40px 15px
}
.main-nav .navbar li.nav-item {
	padding:0 12px
}
.main-nav .navbar li.nav-item a {
	padding: 0;
	color: #353564;
	font-size: 18px;
	text-transform: uppercase;
	font-weight: 500;
	letter-spacing: 1px;
	transition: all 0.3s ease;
	border-bottom: 1px solid transparent
}
.main-nav .navbar li.nav-item a:hover {
	border-bottom: 1px solid #fff
}

/* Main nav */
@media (min-width: 990px) {
	.navbar-brand {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
	.midnav {margin-right:90px}/* half logo size */
	.midnav2 {margin-left:90px}/* half logo size */
	.telephone, .cta {width:7rem;}
	.cta {text-align:right;}
	#topNav .navbar-nav{flex:1 0 0;}
}
</style>
</head>

<body>
<!-- MAIN NAV -->
<div class="container-fluid main-nav ">
  <div class="row">
    <div class="container">
      <nav id="topNav" class="navbar  navbar-expand-lg">
        <div class="navbar-brand mx-auto logo"> <a href="#"> LOGO </a> </div>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse"> <span>Menu</span> <i class="fas fa-bars"></i> </button>
        <div class="navbar-collapse collapse">
          <ul class="navbar-nav">
            <li class="telephone mr-auto">Call us today</li>
            <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li>
            <li class="nav-item midnav"> <a class="nav-link" href="#">Link 2</a> </li>
            <li class="nav-item midnav2"> <a class="nav-link" href="#">Link 3</a> </li>
            <li class="nav-item"> <a class="nav-link" href="#">Link 4</a> </li>
            <li class="cta ml-auto">CTA<li>
          </ul>
        </div>
      </nav>
    </div>
  </div>
</div>
<!-- end MAIN NAV --> 

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

The logo is still absolutely placed, which I don’t like, but I understand that it’s because the bootstrap brand and toggle effect create the dropdown nav on smaller screens so they must remain separate or else you have to build your own toggle menu effects.

Just to show how simple it can be outside of bootstrap here’s a quick demo.

https://codepen.io/paulobrien/pen/KKPBpMr

The html is just this:

<ul class="nav">
  <li>Call us today</li>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li class="logo"><a href="#"> LOGO </a></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
  <li>CTA</li>
</ul>

Of course you’d have to build your own drop down and toggle menus etc :wink:

1 Like

Hi PaulOB,

Thank you for the replay and your examples :slight_smile: Both versions work fantastic.

May I ask why you don’t like the absolute positioned logo?

1 Like

It’s too rigid for my liking as you have to account for it specifically rather than letting elements naturally avoid it.

However sometimes you have to resort to tricks to get the job done :slight_smile:

I see, I guess so.

I ended up setting the width of the 2 midnav divs

	.midnav{width: 430px;}
	.midnav2{width: 215px}

to account for the width of the navigation items.

Thanks again for your help :slight_smile:

1 Like