I am trying to implement a navbar and I want to position several elements in three different positions (align left, right and center).
My problem is that the elements in the center, are not centered on the screen, can someone help me solve my problem and understand what my mistake?
Is there also a way to make the navbar fixed, ie when scrolling it never disappears?
Thanks!
My code DEMO
HTML
<nav class="navbar">
<ul class="nav">
<li class="nav-item">
<a class="btn"><img style="width:45px; height:45px" src="https://cdn3.iconfinder.com/data/icons/2018-social-media-logotypes/1000/2018_social_media_popular_app_logo_reddit-128.png"></a>
</li>
</ul>
<ul class="nav justify-content-center divBtn">
<li class="nav-item">
<a class="btn"><img style="width:45px; height:45px" src="https://cdn3.iconfinder.com/data/icons/2018-social-media-logotypes/1000/2018_social_media_popular_app_logo_reddit-128.png"></a>
</li>
</ul>
<ul class="nav justify-content-end">
<li class="nav-item">
<button>My buttons</button>
<button>My buttons</button>
</li>
<li class="nav-item">
<button>My buttons</button>
</li>
<li class="nav-item">
<a class="btn"><img style="width:45px; height:45px" src="https://cdn3.iconfinder.com/data/icons/2018-social-media-logotypes/1000/2018_social_media_popular_app_logo_reddit-128.png"></a>
</li>
<li class="nav-item">
<a class="btn"> <img style="width:45px; height:45px" src="https://cdn3.iconfinder.com/data/icons/2018-social-media-logotypes/1000/2018_social_media_popular_app_logo_reddit-128.png">
</a>
</li>
<li class="nav-item">
<a class="btn"><img style="width:45px; height:45px" src="https://cdn3.iconfinder.com/data/icons/2018-social-media-logotypes/1000/2018_social_media_popular_app_logo_reddit-128.png">
</a>
</li>
</ul>
</nav>
I don't know if I understand your question, but if I do I think I have the answer, You can do what you write just by giving at the left & right "group" of the navBar a specific margin, You have to set a div's width first, in this case each div has a width of 20% (60% tot.), the left div has a margin-right of 20% and then the riht div has a margin-left of 20%, to get everything fully centred you have to set div's text-align to center, You can run my code just by clicking on run code snippet, below:
.navBar {
display: flex;
position: fixed;
top: 0;
left: 0;
background: #ccc;
width: 100%;
padding: 5px 0;
}
.navBar div {
width: 20%;
text-align: center;
}
.navBar div a {
margin: 0 4px;
padding: 0 4px;;
background: rgb(0, 0, 0);
color: #fff;
text-decoration: none;
}
.left {
margin-right: 20%;
}
.right {
margin-left: 20%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="navBar">
<div class="left">
<a class="btn" href="#">1</a>
<a class="btn" href="#">2</a>
<a class="btn" href="#">3</a>
</div>
<div class="center">
4
5
6
</div>
<div class="right">
7
8
9
</div>
</div>
</body>
</html>
To fix the navBar at the top I used "position: fixed" but even "position: sticky" is good.
.topfixed{
position: sticky !important;
top: 0;
z-index: 10;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar nabBarContainer topfixed">
<ul class="nav divBtn">
<li class="nav-item">
<a class="btn"><img style="width:45px; height:45px" src="https://cdn3.iconfinder.com/data/icons/2018-social-media-logotypes/1000/2018_social_media_popular_app_logo_reddit-128.png"></a>
</li>
</ul>
<ul class="nav justify-content-center divBtn">
<li class="nav-item">
<a class="btn"><img style="width:45px; height:45px" src="https://cdn3.iconfinder.com/data/icons/2018-social-media-logotypes/1000/2018_social_media_popular_app_logo_reddit-128.png"></a>
</li>
</ul>
<ul class="nav justify-content-end divBtn">
<li class="nav-item">
<a class="btn"><img style="width:45px; height:45px" src="https://cdn3.iconfinder.com/data/icons/2018-social-media-logotypes/1000/2018_social_media_popular_app_logo_reddit-128.png">
</a>
</li>
</ul>
</nav>
<div style="height:1000px;"></div>
To fix van header.. you can add the class below:
HTML
<nav class="navbar nabBarContainer topfixed">
CSS
.topfixed{
position: sticky;
top: 0;
z-index: 10;
}
Not sure which buttons you want to center.. there 8 buttons.. how do you trying to get them aligned?
//For fixed navbar:
position: fixed;
//For centering an element:
margin: 0 auto;
//For placing an element at the right side:
position: absolute;
right: 0;
top: 0;
//For placing an element at the left side:
position: absolute;
left: 0;
top: 0;
Related
I have a centered heading within a nav which causes the links in the nav to wrap before the nav-bar collapes -
What I'd like to do is just have the links collapse earlier than they currently are. I've looked over all the answers to this question and haven't been able to find an answer that works for what I'm trying to accomplish. Down below is my last test. I thought if I changed the width of the custom header using a media query that would help but it hasn't. As of right now when the links collapse the hamburger icon is also floating to the left of the centered text. I'll worry about that later.
<nav class ="navbar navbar-expand-xl navbar-light bground">
<a class ="navbar-brand" href ="#"> NavBar Testing </a>
<button class ="navbar-toggler" type ="button" data-toggle ="collapse" data-target ="#colNav">
<span class ="navbar-toggler-icon"></span>
</button>
<div class="customHead">
<text>Centered horizontally and vertically</text>
</div>
<div class ="collapse navbar-collapse" id ="colNav">
<ul class ="navbar-nav ml-auto">
<li class ="nav-item">
<a class ="nav-link" href="#"> Services </a>
</li>
<li class ="nav-item">
<a class ="nav-link" href ="#"> About Us</a>
</li>
<li class ="nav-item">
<a class ="nav-link" href ="#"> Contact Us </a>
</li>
</ul>
</div>
</nav>
.navbar-collapse {
background-color: red;
float: right;
width: 25%;
}
.navbar-nav, .nav-link{
background-color: yellow;
color: red !important;
}
.customHead {
width: 100%;
position: relative;
background: red;
}
text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -130%);
background: orange;
margin-top: 10px;
}
#media only screen and (max-width: 1200px) {
.customHead {
width: 80%;
}
.navbar-toggler {
background-color: red;
float: right;
}
}
There is other CSS than what's displayed here so it's tough to know exactly. But one solve could be:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.flex {
flex: 1;
display: flex;
}
.horizontal-center {
justify-content: center;
}
.horizontal-end {
justify-content: flex-end;
}
.vertical-center {
align-items: center;
}
.navbar-nav {
display: flex;
}
.nav-link{
background-color: yellow;
color: red !important;
margin-left: 10px;
}
li {
list-style: none;
}
</style>
</head>
<body>
<nav class="flex">
<div class="flex vertical-center">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#colNav">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#"> NavBar Testing </a>
</div>
<div class="flex vertical-center horizontal-center">
<text>Centered horizontally and vertically</text>
</div>
<div class="flex horizontal-end vertical-center">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#"> Services </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Contact Us </a>
</li>
</ul>
</div>
</nav>
</body>
</html>
This is my first attempt at actually trying to do some CSS outside of www.codeacademy.com and I am having some trouble.
When I run my code, I find that the text in the header is not aligning and the 'logout' is being pushed up against the right as opposed to having the same distance from the edge as 'My Inventory'.
What am I doing wrong?
Also feel free to tell me if I am structuring things badly or anything else, so I can learn. I hope this is the correct place for something like this!
HTML code:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Blank</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="header">
<header>
<ul>
<li> <a class="active" href="#home">My Inventory</a></li>
<li><a class="browse" href="#browse">Browse Papers</a></li>
<li><a class="build" href="#build">Build A Paper</a></li>
<li><a class="data" href="#data">View Data</a></li>
<li style="float:right"><a class="admin" href="#admin">Settings</a></li>
<li style="float:right"><a class="logout" href="#logout">Log Out</a></li>
</ul>
</header>
</div>
</div>
</body>
</html>
CSS
html {
font-family: "PT Sans", sans-serif;
}
body {
margin: 0;
padding: 0;
}
.container {
min-height:100%;
min-width:100%;
display: grid;
}
a {
text-decoration: none;
}
.header{
font-size: 18px;
line-height: 1.25pt;
background-color: #00AFB5;
width: 100%;
height: 50px;
top: 0;
margin: 0;
padding-top: 20px;
padding-bottom:20px;
padding-left: 10px;
padding-right: 10px;
list-style-type: none;
}
.header li {
display: inline-block;
}
.header a {
display: block;
color: #fff;
}
Use bootstrap, it gives you plenty of options for resizing the viewport and keeping your look and feel of the style. Here is a default example of bootstrap using your link settings. View it in full page mode in the snipit.
https://getbootstrap.com/
https://getbootstrap.com/docs/4.0/components/navbar/
NOTE: I am using the CDN for the example, if you wish to change the styles
Download the bootstrap file.
Search For bootstrap css file.
Open the (bootstrap. css) file and search for 'primary'.
Change it to the color you desire.
You can change any of the theme colors there.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link active" href="#home">My Inventory</a>
</li>
<li class="nav-item">
<a class="nav-link browse" href="#browse">Browse Papers</a>
</li>
<li class="nav-item">
<a class="nav-link build" href="#build">Build A Paper</a>
</li>
<li class="nav-item">
<a class="nav-link data" href="#data">View Data</a>
</li>
</ul>
</div>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link admin" href="#admin">Settings</a>
</li>
<li class="nav-item">
<a class="nav-link logout" href="#logout">Log Out</a>
</li>
</ul>
</div>
</nav>
Run the snipit in full page mode.
I am a bit stuck trying to place or stack two navigation menus on top of each other, I am using Bootstrap, HTML and CSS.
I think I might need to use the z-index, but not sure exactly how.
I have added the code below and included picture of what I would like to achieve.
Code:
<!<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<nav class="navbar navbar-expand-md bg-white navbar-white">
<a class="navbar-brand" href="#">
<img src="assets/logo2.png"height="84px">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="accessability">
<li class="nav-item">
<a class="contrast">Contrast</a>
</li>
<li class="Font-size">Font size</a>
</li>
<li class="download">Download a brochure</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">New Vehicles</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Nearly New/ Used Vehicles</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Motability</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Aftercare</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>
<br>
<nav class="navbar navbar-inverse bg-primary">
<ul>
<li class="sec-menu">Versa Connect</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="sec-menu">Overview</li>
<li class="sec-menu">Offers</li>
<li class="sec-menu">Models</li>
<li class="sec-menu">Optional Extras</li>
</ul>
</nav>
<section id="cover_image">
<div class="container">
<img src="assets/cover_image.jpg" >
<div class="text-block">
<h1>Versa Connect</h1>
<p>The Ford Torneo Connect is a relaxing and comfortable place to be.
Great to drive, great to sit in, it boasts premium finish, high quality materials
and fuel efficiency without compromising everyday practicality. </p>
<button type="button" class="btn btn-lg btn-primary">Make an enquiry</button>
</div>
</div>
</body>
</html>
CSS
h1{
font-family: roboto;
}
p{
font-family: roboto;
font-size: 18px;
}
li{
font-family: roboto;
font-size: 18px;
display:inline;
padding: 30px;
}
li a{
color: #000;
}
.navbar-right{
float: right !important;
margin-right: -15px;
display: inline;
}
ul.nav navbar-nav navbar-right li a{
display: flex;
}
li.sec-menu a{
color: #fff;
font-family: roboto;
}
.container{
margin: 0;
padding: 0;
}
.text-block {
text-align: center;
position: absolute;
bottom: 10px;
left: 100px;
background-color:rgba(255,255,255,0.66);
color:#000;
width: 380px;
padding:50px;
}
.btn btn-lg btn-primary{
padding-left: 10px;
width: 360px;
}
I would appreciate it if somebody could help me with my coding and show me how or where I should code the z-index in my code.
The z-index property is used for stacking items on top of each other via the z plane (think of a 3-dimensional plane), so that property would not help you here. All you need to do is create each navbar using a separate "nav" or "div" tag, which will put them on separate lines.
You are on the right track, but you have multiple errors in your code that are causing this issue. Your navbar consisting of "Contrast, Font Size, Download a Brochure" have closing anchor tags but not beginning anchor tags. This navbar is also using a class "accessability" that is not defined in your CSS, which is why it's appearing as an unstyled unordered list.
Here is a simple version of what you are looking for:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<nav>
<ul>
<li>Contrast</li>
<li>Font Size</li>
<li>Download a Brochure</li>
</ul>
</nav>
<nav>
<ul>
<li>New Vehicles</li>
<li>Nearly New/Used Vehicles</li>
<li>Motability</li>
<li>Aftercare</li>
<li>Contact Us</li>
</ul>
</nav>
</body>
</html>
This works, you do not need the z-index. You can view it here on codepen https://codepen.io/anon/pen/Rvdgaq
<nav class="navbar navbar-expand-md bg-white navbar-white">
<a class="navbar-brand" href="#">
<img src="assets/logo2.png"height="84px">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="accessability">
<li class="nav-item">
<a class="contrast">Contrast</a>
</li>
<li class="Font-size">Font size</a>
</li>
<li class="download">Download a brochure</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">New Vehicles</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Nearly New/ Used Vehicles</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Motability</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Aftercare</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>
<nav class="navbar navbar-inverse bg-primary">
<ul>
<li class="nav-item sec-menu">Versa Connect</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="nav-item sec-menu">Overview</li>
<li class="nav-item sec-menu">Offers</li>
<li class="nav-item sec-menu">Models</li>
<li class="nav-item sec-menu">Optional Extras</li>
</ul>
</nav>
</div>
</div>
<section id="cover_image">
<div class="container">
<div class="row">
<img src="assets/cover_image.jpg" >
<div class="text-block">
<h1>Versa Connect</h1>
<p>The Ford Torneo Connect is a relaxing and comfortable place to be.
Great to drive, great to sit in, it boasts premium finish, high quality materials
and fuel efficiency without compromising everyday practicality. </p>
<button type="button" class="btn btn-lg btn-primary">Make an enquiry</button>
</div>
</div>
</div>
</section>
A Few things I noticed, 1. You did not close off your section tag so that could be causing issues. And you do not need postion: absolute; on .text-block, take off bottom: 10px;
Make it position relative
i have use minus margin to place the navbar inside a div which has a class main..in small screen when i click on the navbar toggler icon it does not look good..because i need to change the margin again...how can i solve this problem without using minus margin?
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css">
<div class="top"></div>
<div class="wrapper">
<nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top">
<button class="navbar-toggler ml-auto" data-toggle="collapse" data-target="#navDrop">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navDrop">
<ul class="navbar-nav">
<li class="nav-item">
HOME
</li>
<li class="nav-item">
ABOUT
</li>
<li class="nav-item">
SKILL
</li>
<li class="nav-item">
PORTFOLIO
</li>
<li class="nav-item">
TEAM
</li>
<li class="nav-item">
BLOG
</li>
<li class="nav-item">
CONTACT
</li>
</ul>
</div>
</nav>
<div class="main"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter- bootstrap/4.1.1/js/bootstrap.min.js"></script>
here is output of my code:
https://codepen.io/Sakhawat5/pen/NzwQJz
--Update--
As I think your question is how to append the navbar class to the main div if the user has scrolled more then 50px. This is what could help you out.
$(document).scroll(function() {
if ($(document).scrollTop() >= 50) {
// user scrolled 50 pixels or more;
// do stuff for example:
$('.navbar').appendTo('.main');
// this will append the navbar to the main div, if you want other styling on the navbar aswell we can do the following:
$('.navbar').addClass('.UserHasScrolled')
// now in you CSS set styling to .UserHasScrolled
} else {
// do things when user has NOT scrolled more then 50px
}
});
Also make sure to include jQuery, this is possible, paste this beneath all other scripts:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
To your .UserHasScrolled class you can set something like this:
.UserHasScrolled {
position: absolute;
width: 100%;
top: 0;
}
--First answer--
What you ask for is: #media screen and (max-width 767px) while the screen width has a lower size than 767px you can define an overwriting css style like this:
#media screen and (min-width 767px) {
.navbar {
margin-bottom: -336px;
}
}
But this causes another problem, while the navbar is closed the main class will still have a margin of -336px and that's not what you want I guess.
To keep your navbar on top just set position to fixed:
.navbar {
position: fixed;
width: 90%;
margin-left: 5%;
margin-right: 5%;
}
This is your solution:
.top{
height:50px;
background:red;
}
.navbar{
margin-left:20px;
margin-right:20px;
}
.main{
height:1500px;
background:orange;
}
<div class="top"></div>
<div class="wrapper">
<div class="main">
<nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top">
<button class="navbar-toggler ml-auto" data-toggle="collapse" data-target="#navDrop">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navDrop">
<ul class="navbar-nav">
<li class="nav-item">
HOME
</li>
<li class="nav-item">
ABOUT
</li>
<li class="nav-item">
SKILL
</li>
<li class="nav-item">
PORTFOLIO
</li>
<li class="nav-item">
TEAM
</li>
<li class="nav-item">
BLOG
</li>
<li class="nav-item">
CONTACT
</li>
</ul>
</div>
</nav>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter- bootstrap/4.1.1/js/bootstrap.min.js"></script>
The changes to your CSS as follows should fix the issue:
.navbar{
margin-left: 5%;
margin-right: 5%;
width: 90%;
position: fixed;
}
and if you don't want a fixed nav:
.navbar{
margin-left: 5%;
margin-right: 5%;
width: 90%;
position: absolute;
}
Let me know if you have any questions.
I am trying to create a responsive navbar for mobile, but I am having trouble getting the link containers to resize properly. I also cannot seem to get the text to center itself vertically. I have tried using auto padding and margins in both cases, but they don't seem to be doing anything. I am using Bootstrap.
My questions are:
How do I center the text vertically within its container?
How do I get the width of each link's container to be the width of the text
How do I then get the spacing between each container to be the same, so that all together they fill the width of the screen?
HTML
<div class="container" id="nav-container-mobile">
<ul class="list-unstyled list-inline text-center d-flex" id="nav-list-mobile">
<li class="list-inline-item text-center nav-link-horizontal" id="nav-profile-link-mobile">
<a class="nav-link" href="#Profile">
<div class="nav-link-container-mobile">Profile</div>
</a>
</li>
<li class="list-inline-item text-center nav-link-horizontal" id="nav-experience-link-mobile">
<a class="nav-link" href="#Experience">
<div class="nav-link-container-mobile">Experience</div>
</a>
</li>
<li class="list-inline-item text-center nav-link-horizontal" id="nav-skills-link-mobile">
<a class="nav-link" href="#Skills">
<div class="nav-link-container-mobile">Skills</div>
</a>
</li>
<li class="list-inline-item text-center nav-link-horizontal" id="nav-project-link-mobile">
<a class="nav-link" href="#project">
<div class="nav-link-container-mobile">Projects</div>
</a>
</li>
<li class="list-inline-item text-center nav-link-horizontal" id="nav-contact-link-mobile">
<a class="nav-link" href="#Contact">
<div class="nav-link-container-mobile">Contact</div>
</a>
</li>
</ul>
</div>
CSS
#nav-container-mobile {
position: absolute;
width: 100%;
height: 70px;
padding: 0;
background: #292929;
z-index: 5;
}
#nav-list-mobile {
width: 100%;
height: 100%;
margin: 0;
vertical-align: middle;
}
.nav-link-horizontal {
height: 100%;
width: 15vw;
min-width: 50px;
}
.nav-link-container-mobile {
padding: auto;
height: 100%;
overflow-wrap: break-word;
}
.nav-link {
color: #aeaeae;
}
Any help or advice is appreciated.
JSFiddle
It would be simpler to use the Bootstrap 4 Nav Fill or Justify, and then just change the background color and other styles as needed.
https://www.codeply.com/go/WsWHHIfRlh
<div class="navbar navbar-expand navbar-dark" id="nav-container-mobile">
<div class="container-fluid">
<ul class="navbar-nav nav-fill w-100">
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Experience</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
#nav-container-mobile {
width: 100%;
height: 70px;
padding: 0;
background: #292929;
z-index: 5;
}
.nav-link {
color: #aeaeae;
}