How to position menu button on navbar as the furthest right item - html

Question

I'm trying to float: right my the email/tel and toggle menu button to the right side of the page but have it in the order: email/tel/toggle menu button (toggle menu button on the furthest right). I want the items to push each other across as the window narrows and then I already have a #media to get rid of the tel and email at a certain width.
The toggle menu button is ahead of my contact details but I figured that if they were all set to float right then then order that you put them in the html should determine how they appear on the page?
Also, as another question, my children menu of drop down menu (under services in my code pen) don't line up with the main header, what css do I need to add/change to fix this?
CSS
* {
margin: 0;
padding: 0;
font-family: 'Open Sans';
/*text-transform: uppercase;*/
}
html {
font-size: 62.5%;
}
body {
background-color: #f5f5f5; /*light grey*/
/*background-color: #00ffff; light blue */
letter-spacing: .18em;
}
/*This CSS is for the header*/
/*This CSS is for the logo, name, tele, email*/
h1 {
/*The line height = div height centers everything inside div*/
line-height: 70px;
height: 70px;
}
h1 a {
color: red;
padding: 0 10px;
font-family: "arial black";
font-size: 35px;
}
.first-letter {
color: red;
padding: 0px;
font-family: "arial black";
font-size: 45px;
}
.teleHeader {
display:inline-block;
float: right;
width: auto;
font-size: 17px;
line-height: 70px;
height: 70px;
}
.emailHeader {
display:inline-block;
float: right;
width: auto;
font-size: 17px;
line-height: 70px;
height: 70px;
}
.teleHeader a, .emailHeader a {
color: red;
font-weight: bold;
font-family: "Open Sans";
}
/*CSS for the navbar menu*/
a {
text-decoration: none;
color: white;
}
ul, li {
list-style-type: none; /* This removes all the bullet points from all unordered lists*/
} /*I need to keep this as it styles the navbar*/
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.l-left {
float: left;
}
.l-right {
float: right;
}
.end {
margin-top: 30px;
font-size: 3em;
font-weight: bold;
opacity: 0;
-webkit-transform: translateY(300px);
transform: translateY(300px);
transition: opacity, -webkit-transform 1s;
transition: opacity, transform 1s;
transition: opacity, transform 1s, -webkit-transform 1s;
transition-delay: 1s;
}
.header-top {
background: white;
height: 70px;
padding: 0 10px;
position: fixed;
top: 0;
width: 100%;
min-width: 300px;
z-index: 12;
box-sizing: border-box;
}
.toggleContainer (
display:inline-block;
float: right;
width: auto;
)
.toggle-menu {
width: 50px;
height: 50px;
top: 10px;
position: absolute;
}
.toggle-menu i {
position: absolute;
display: block;
height: 2px;
background: red;
width: 30px;
left: 10px;
transition: all .3s;
}
.toggle-menu i:nth-child(1) {
top: 16px;
}
.toggle-menu i:nth-child(2) {
top: 24px;
}
.toggle-menu i:nth-child(3) {
top: 32px;
}
.open-menu i:nth-child(1) {
top: 25px;
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.open-menu i:nth-child(2) {
background: transparent;
}
.open-menu i:nth-child(3) {
top: 25px;
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
}
nav {
height: 0;
opacity: 0;
box-sizing: border-box;
background: rgba(0, 47, 77, .25);
position: fixed;
top: 70px;
width: 100%;
overflow: hidden;
transition: all 1s;
}
.open-menu ~ nav {
opacity: 1;
padding: 80px 0;
z-index: 15;
height: calc(90vh - 70px);
}
nav ul {
padding: 0 10px;
display: flex;
}
nav li {
flex: 1;
}
nav li a {
font-size: 2em;
display: block;
padding: 30px;
text-align: center;
transition: background .3s;
}
nav li a {
background: #ff4b4b;
margin-left: 20px;
}
nav li a:hover {
background: #ADD8E6;
}
/*These 3 sections add the drop down menus in the headers*/
ul li ul.services-dropdown{
display: none;
z-index: 999;
width: 100%;
}
ul li:hover ul.services-dropdown{
display: inline-block; /* Display the dropdown */
position:relative;
}
ul li ul.services-dropdown li{
display: block;
}
section {
text-align: center;
}
h2 {
font-size: 13px;
}
h2 a{
padding: 8 8 8 8px;
float: left;
color: white;
background-color: red;
font-family: 'Open Sans';
font-weight: bold;
}
h3 {
font-weight: bold;
font-size: 3.5vw;
}
#fp-nav ul li a span,
.fp-slidesNav ul li a span {
background: white;
width: 8px;
height: 8px;
margin: -4px 0 0 -4px;
}
#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span {
width: 16px;
height: 16px;
margin: -8px 0 0 -8px;
background: transparent;
box-sizing: border-box;
border: 2px solid #212121;
}
/*Removes the tel and email when window is narrow */
#media (max-width: 1420px) {
.narrow-hide{
display: none;
}
}
/*Edits the nav bar when window is narrow */
#media screen and (max-width: 767px) {
nav ul {
flex-direction: column;
}
nav li {
margin-top: 1px;
}
nav li a {
font-size: 1.5em;
}
.scroll-icon {
display: none;
}
#media screen and (max-width: 400px) {
html {
font-size: 50%;
}
.open-menu ~ nav {
padding: 20px 0;
}
nav li a {
padding: 3px;
}
}
HTML
<header>
<div class="header-top clearfix">
<h1 class="l-left">
<a href="Home Page.html">
<img style="margin-top: 10px; margin-right: 20px;" alt="Logo" src="../Logo/Vector Logo.png" width="60px" height="50px">
</a>
</h1>
<h1 class="l-left">
<a href="Home Page.html">
Great <span class="edit-name" style="font-family:arial black">Things</span>
</a>
</h1>
<div class="teleHeader">
<span class="narrow-hide" ">
<a>
TEL: [phone]
</a>
</span>
</div>
<div class="emailHeader">
<span class="narrow-hide">
<a>
EMAIL: info#awesome.co.uk
</a>
</span>
</div>
<div class="toggleContainer">
<a class="l-right toggle-menu">
<i></i>
<i></i>
<i></i>
</a>
</div>
</div>
<nav class="hide">
<ul id="menu">
<li>
Home
</li>
<li>
#Services
<ul class="services-dropdown">
<li>Hi</li>
<li>There</li>
<li>How</li>
<li>Funny</li>
</ul>
</li>
<li>
More
</li>
<li>
Stuff
</li>
<li>
k
</li>
</ul>
</nav>
</header>
Script
var $header_top = $('.header-top');
var $nav = $('nav');
$header_top.find('a').on('click', function() {
$(this).parent().toggleClass('open-menu');
});
CODEPEN: https://codepen.io/Ribeye/pen/qBbJRMa

Answer 1

I would recommend you going for using flexbox, it will be much easier then trying to align inline-block elements.
Here is a good ressource on how to use flexbox:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

As said by #Mark-Att, you can use flexbox to overcome this issue.
I've modified your HTML and added corresponding CSS. Try viewing the result in a full page and you will see the results.
var $header_top = $('.header-top');
var $nav = $('nav');
$header_top.find('a').on('click', function() {
$header_top.toggleClass('open-menu');
});
* {
margin: 0;
padding: 0;
font-family: 'Open Sans';
/*text-transform: uppercase;*/
}
html {
font-size: 62.5%;
}
body {
background-color: #f5f5f5; /*light grey*/
/*background-color: #00ffff; light blue */
letter-spacing: .18em;
}
/*This CSS is for the header*/
/*This CSS is for the logo, name, tele, email*/
h1 {
/*The line height = div height centers everything inside div*/
line-height: 70px;
height: 70px;
}
h1 a {
color: red;
padding: 0 10px;
font-family: "arial black";
font-size: 35px;
}
.first-letter {
color: red;
padding: 0px;
font-family: "arial black";
font-size: 45px;
}
.general-info{
display: flex;
align-content: end;
flex-direction: row;
justify-content: flex-end;
}
.teleHeader {
display:inline-block;
float: right;
width: auto;
font-size: 17px;
line-height: 70px;
height: 70px;
}
.emailHeader {
display:inline-block;
float: right;
width: auto;
font-size: 17px;
line-height: 70px;
height: 70px;
margin-right: 20px;
}
.teleHeader a, .emailHeader a {
color: red;
font-weight: bold;
font-family: "Open Sans";
}
/*CSS for the navbar menu*/
a {
text-decoration: none;
color: white;
}
ul, li {
list-style-type: none; /* This removes all the bullet points from all unordered lists*/
} /*I need to keep this as it styles the navbar*/
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.l-left {
float: left;
}
.l-right {
float: right;
}
.end {
margin-top: 30px;
font-size: 3em;
font-weight: bold;
opacity: 0;
-webkit-transform: translateY(300px);
transform: translateY(300px);
transition: opacity, -webkit-transform 1s;
transition: opacity, transform 1s;
transition: opacity, transform 1s, -webkit-transform 1s;
transition-delay: 1s;
}
.header-top {
background: white;
height: 70px;
padding: 0 10px;
position: fixed;
top: 0;
width: 100%;
min-width: 300px;
z-index: 12;
box-sizing: border-box;
}
.toggle-menu {
width: 50px;
height: 50px;
display: inline-block;
position: relative;
top: 10px;
}
.toggle-menu i {
position: absolute;
display: block;
height: 2px;
background: red;
width: 30px;
left: 10px;
transition: all .3s;
}
.toggle-menu i:nth-child(1) {
top: 16px;
}
.toggle-menu i:nth-child(2) {
top: 24px;
}
.toggle-menu i:nth-child(3) {
top: 32px;
}
.open-menu i:nth-child(1) {
top: 25px;
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.open-menu i:nth-child(2) {
background: transparent;
}
.open-menu i:nth-child(3) {
top: 25px;
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
}
nav {
height: 0;
opacity: 0;
box-sizing: border-box;
background: rgba(0, 47, 77, .25);
position: fixed;
top: 70px;
width: 100%;
overflow: hidden;
transition: all 1s;
}
.open-menu ~ nav {
opacity: 1;
padding: 80px 0;
z-index: 15;
height: calc(90vh - 70px);
}
nav ul {
padding: 0 10px;
display: flex;
}
nav li {
flex: 1;
}
nav li a {
font-size: 2em;
display: block;
padding: 30px;
text-align: center;
transition: background .3s;
}
nav li a {
background: #ff4b4b;
margin-left: 20px;
}
nav li a:hover {
background: #ADD8E6;
}
/*These 3 sections add the drop down menus in the headers*/
ul li ul.services-dropdown{
display: none;
z-index: 999;
width: 100%;
}
ul li:hover ul.services-dropdown{
display: inline-block; /* Display the dropdown */
position:relative;
}
ul li ul.services-dropdown li{
display: block;
}
section {
text-align: center;
}
h2 {
font-size: 13px;
}
h2 a{
padding: 8 8 8 8px;
float: left;
color: white;
background-color: red;
font-family: 'Open Sans';
font-weight: bold;
}
h3 {
font-weight: bold;
font-size: 3.5vw;
}
#fp-nav ul li a span,
.fp-slidesNav ul li a span {
background: white;
width: 8px;
height: 8px;
margin: -4px 0 0 -4px;
}
#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span {
width: 16px;
height: 16px;
margin: -8px 0 0 -8px;
background: transparent;
box-sizing: border-box;
border: 2px solid #212121;
}
/*Removes the tel and email when window is narrow */
#media (max-width: 1420px) {
.narrow-hide{
display: none;
}
}
/*Edits the nav bar when window is narrow */
#media screen and (max-width: 767px) {
nav ul {
flex-direction: column;
}
nav li {
margin-top: 1px;
}
nav li a {
font-size: 1.5em;
}
.scroll-icon {
display: none;
}
#media screen and (max-width: 400px) {
html {
font-size: 50%;
}
.open-menu ~ nav {
padding: 20px 0;
}
nav li a {
padding: 3px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<div class="header-top clearfix">
<h1 class="l-left">
<a href="Home Page.html">
<img style="margin-top: 10px; margin-right: 20px;" alt="Logo" src="../Logo/Vector Logo.png" width="60px" height="50px">
</a>
</h1>
<h1 class="l-left">
<a href="Home Page.html">
Awesome <span class="edit-name" style="font-family:arial black">Cakes</span>
</a>
</h1>
<div class="general-info">
<div class="teleHeader">
<span class="narrow-hide">
<a>
TEL: [phone]
</a>
</span>
</div>
<div class="emailHeader">
<span class="narrow-hide">
<a>
EMAIL: info#yay.com
</a>
</span>
</div>
<a class="l-right toggle-menu">
<i></i>
<i></i>
<i></i>
</a>
</div>
</div>
<nav class="hide">
<ul id="menu">
<li>
Home
</li>
<li>
Services
<ul class="services-dropdown">
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>
</li>
<li>
abc
</li>
<li>
abc
</li>
<li>
abc
</li>
</ul>
</nav>
</header>