I am trying to work on twitter bootstrap to make a responsive website although i am facing some problem with the navigation toggle button I have included all the libraries which was the issue for some of the questions asked here still I am unable to know the exact problem.
body {
font-family: Arial, serif;
background: url(https://freenaturestock.s3.us-east-1.amazonaws.com/1602.jpg) center center no-repeat;
background-attachment: fixed;
background-size: cover;
}
/* editing the logo part*/
.logo {
height: 32px;
opacity: 1;
}
/* editing the navbar background colour*/
.navbar-inverse {
background: rgba(0, 0, 0, 0.5);
}
/* navbar list options editing*/
.nav li {
color: #fff;
font-size: 17px;
margin-right: 15px;
padding: 10px 15px;
}
.nav li:hover {
border-bottom: 3px solid #00FFB8;
padding-bottom: 3px;
}
<!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">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>WebServ</title>
<link href="https://fonts.googleapis.com/css2?family=Arvo:ital,wght#0,400;0,700;1,400&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="styling.css">
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="30">
<!-- Create a nav bar-->
<div class="container-fluid">
<nav role="navigation" class="navbar nav-tabs navbar-inverse bg-inverse navbar-toggleable navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar" aria-controls="myNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="sr-only">Toggle navigation</span>
<!-- <span class="navbar-toggler-icon"></span>-->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class=" collapse navbar-collapse" id="myNavbar ">
<ul class=" nav navbar-nav navbar-right mylist">
<li class="nav-item" role="presentation"><a class="nav-link" href="#home"><span class="glyphicon glyphicon-home" style="padding: 8px;"></span>Home</a></li>
<li class="nav-item" role="presentation" " ><a class="nav-link " href="#about "><span class="glyphicon glyphicon-user " style="padding: 8px " ;></span>About</a>
</li>
<li class="nav-item " role="presentation "><a class="nav-link " href="#portfolio "><span class="glyphicon glyphicon-list-alt " style="padding: 8px; "></span>Portfolio</a></li>
<li class="nav-item " href="#role=" presentation "><a class="nav-link " href="#contact "><span class="glyphicon glyphicon-earphone " style="padding: 8px; "></span>Contact</a></li>
</ul>
</div>
</div>
</nav>
</div>
</body>
</html>
https://codepen.io/webserv01/pen/rNxKVrN
you had two problems, the first in id of navbar, you include a space:
id="myNavbar ">
Must be : id="myNavbar">
the second problem was you include old jquery release(with a bug, and two time?)
body {
font-family: Arial, serif;
background: url(https://freenaturestock.s3.us-east-1.amazonaws.com/1602.jpg) center center no-repeat;
background-attachment: fixed;
background-size: cover;
}
/* editing the logo part*/
.logo {
height: 32px;
opacity: 1;
}
/* editing the navbar background colour*/
.navbar-inverse {
background: rgba(0, 0, 0, 0.5);
}
/* navbar list options editing*/
.nav li {
color: #fff;
font-size: 17px;
margin-right: 15px;
padding: 10px 15px;
}
.nav li:hover {
border-bottom: 3px solid #00FFB8;
padding-bottom: 3px;
}
<link href="https://fonts.googleapis.com/css2?family=Arvo:ital,wght#0,400;0,700;1,400&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<body data-spy="scroll" data-target=".navbar" data-offset="30">
<!-- Create a nav bar-->
<div class="container-fluid">
<nav role="navigation" class="navbar nav-tabs navbar-inverse bg-inverse navbar-toggleable navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar" aria-controls="myNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="sr-only">Toggle navigation</span>
<!-- <span class="navbar-toggler-icon"></span>-->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class=" collapse navbar-collapse" id="myNavbar">
<ul class=" nav navbar-nav navbar-right mylist">
<li class="nav-item" role="presentation"><a class="nav-link" href="#home"><span class="glyphicon glyphicon-home" style="padding: 8px;"></span>Home</a></li>
<li class="nav-item" role="presentation" " ><a class="nav-link " href="#about "><span class="glyphicon glyphicon-user " style="padding: 8px " ;></span>About</a>
</li>
<li class="nav-item " role="presentation "><a class="nav-link " href="#portfolio "><span class="glyphicon glyphicon-list-alt " style="padding: 8px; "></span>Portfolio</a></li>
<li class="nav-item " href="#role=" presentation "><a class="nav-link " href="#contact "><span class="glyphicon glyphicon-earphone " style="padding: 8px; "></span>Contact</a></li>
</ul>
</div>
</div>
</nav>
</div>
</body>
Related
I have been coding a website and found that a link I need to be responsively stuck to the bottom of my div (In that spot both on large screen & mobile view)
Below is the code I currently have & 2 pictures attached for both big screen and mobile.
nav#navbar {
background-color: rgba(0, 0, 0, 0.8) !important;
}
nav#navbar ul.navbar-nav {
display: flex;
margin: 0 auto;
}
div#image-container {
height: 1920px;
background-repeat: no-repeat;
}
#booksy-container {
/* CSS properties and values go here */
height: 10.5%;
position: absolute;
top: 60%;
width: 100%;
text-align: center;
}
#booksy-link {
display: fixed;
position: relative;
align-content: end;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bootstrap test</title>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
/>
<link rel="stylesheet" href="index.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.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<!--Navigation bar-->
<nav
class="navbar navbar-expand-md bg-dark navbar-dark navbar-fixed-top transparent"
id="navbar"
>
<a class="navbar-brand" href="index.html">
<img src="images/BlankBack.png" width="80" height="60" alt="" />
</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="aboutus.html">About us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="products.html">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contactus.html">Contact us</a>
</li>
</ul>
</div>
</nav>
<!--NavBar Ends-->
<div
class="container-fluid"
id="image-container"
style="
background-image: url('images/Charlie-Co.-Barbershop-West-Chester-3.png');
"
>
<div class="d-flex justify-content-center pb-0" id="booksy-container">
<a
href="https://booksy.com/en-ie/3715_charlies-barbers-lucan_barbers_52867_ireland"
id="booksy-link"
>Book your appointment here!</a
>
</div>
</div>
</body>
</html>
Any suggestions welcome! Thank you!
I need the code to reflect what the view on a large screen is to the mobile view
I am trying to change the CSS of a parent image (navbar's border) when the mobile hamburger menu is clicked open, then for it to return back again when clicked again/menu closed.
I have tried to target the navbar with the border using both .parent and .find selector options, but I cannot get either to work. I think I am close, but I'm struggling to work out what's going wrong. Thank you for your help.
$(".navbar-toggler").click(function(){
$(this).find('.navbar').addClass("is-clicked");
$(this).find('.navbar').removeClass("is-clicked");
});
.navbar {
position: relative;
z-index: 98;
border-bottom: 4px solid #000000;
margin-left: 40px;
margin-right: 40px;
color: #000000;
height: 100px;
}
.navbar.is-clicked {
border-bottom: red;
}
.navbar-toggler {
font-size: 32px;
color: black;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar navbar-expand-lg">
<div class="container-fluid nav-container">
<a class="navbar-brand" href="index.html">ABC.</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="toggler-icon"><i class="fas fa-bars"></i>
</span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item nav-item-about p-nav">
<a class="nav-link" aria-current="page" href="about.html">About</a>
</li>
<li class="nav-item p-nav">
<a class="nav-contact" href="mailto:michellelclement#gmail.com?subject=Hello from your portfolio!">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
That is because when you use $(this).find('.navbar'), it only searches for the element with the class navbar inside the element.
If you want to search outwards, then you need to use .closest(), which will select the closest parent element that matches the selector .navbar:
$(".navbar-toggler").click(function(){
$(this).closest('.navbar').toggleClass("is-clicked");
});
See a proof-of-concept example:
$(".navbar-toggler").click(function() {
$(this).closest('.navbar').toggleClass("is-clicked");
});
.navbar {
position: relative;
z-index: 98;
border-bottom: 4px solid #000000;
margin-left: 40px;
margin-right: 40px;
color: #000000;
height: 100px;
}
.navbar.is-clicked {
border-bottom-color: red;
}
.navbar-toggler {
font-size: 32px;
color: black;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar navbar-expand-lg">
<div class="container-fluid nav-container">
<a class="navbar-brand" href="index.html">ABC.</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="toggler-icon"><i class="fas fa-bars"></i>
</span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item nav-item-about p-nav">
<a class="nav-link" aria-current="page" href="about.html">About</a>
</li>
<li class="nav-item p-nav">
<a class="nav-contact" href="mailto:michellelclement#gmail.com?subject=Hello from your portfolio!">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
The Jquery:
$('.navbar-toggler').on('click', function(){
$('.navbar').toggleClass('is-clicked');
});
You also need to change this in your css:
.navbar.is-clicked {
border-bottom-color: red;
}
I tried to center my search field using code below.
But the search field is not very responsive because when in mobile it stays right on top with footer unlike on desktop. I want it to have a gap between footer.
This issue only displays on small screen mode.
Any input would be appreciated. I hope you all have a great weekend!
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
}
section {
padding: 70px 0;
border-bottom: 1px dotted #ccc;
}
.grid-example div[class^="col"] {
border: 1px solid white;
background: lightblue;
text-align: center;
padding-top: 8px;
padding-bottom: 8px;
}
.jumbotron {
background-color: lightskyblue;
}
table th {
text-align: center;
}
.table {
margin: auto;
width: 50% !important;
}
.table td {
text-align: center;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
line-height: 60px;
color: #fff;
text-align: center;
background-color: #0275D8;
}
a {
color: #f00;
}
a:hover {
color: #0f0;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Test</title>
<meta name="description" content="Test">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="Sticky Footer.css">
</head>
<body>
<nav class="navbar-expand-sm navbar-expand-md navbar-expand-lg navbar navbar-light" style="background-color: #C0C0C0;">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Test <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Test</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Test</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Test
</a>
<div class="dropdown-menu" style="width:300px" aria-labelledby="navbarDropdown">
<div class="container container-sm">
<div class="row">
<div class="col-sm-4">
<a class="dropdown-item" href="#">Test</a>
<a class="dropdown-item" href="#">Test</a>
<a class="dropdown-item" href="#">Test</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
<div class="jumbotron">
<h1 class="display-8">Hello, world!</h1>
<p class="lead-8">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p class="lead">
<a class="btn btn-primary btn-md" href="#" role="button">Learn more</a>
</p>
</div>
<div class="row align-items-center" style="min-height: calc(100vh - 500px);">
<div class="col-xs-3 col-sm-8 col-md-6 col-lg-6 mx-auto">
<div class="input-group-prepend">
<input id='urlurl' type="url" class="form-control" placeholder="Search" pattern="https?://.+" required />
<span class="input-group-btn">
<button class="btn btn-primary" style="background-color: #0275D8; border-color: #0275D8;" type="button" >Test</button>
</span>
</div>
</div>
</div>
<footer class="footer fixed-bottom text-center">
<span class="text">Place sticky footer content here.</span>
</footer>
<!-- jQuery Version 1.11.1 -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Bootstrap Core JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
I didn't understand what you really want but I have tried it little bit.I think padding-bottom: 100px; will solve your problem.
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
padding-bottom: 100px;
}
section {
padding: 70px 0;
border-bottom: 1px dotted #ccc;
}
.grid-example div[class^="col"] {
border: 1px solid white;
background: lightblue;
text-align: center;
padding-top: 8px;
padding-bottom: 8px;
}
.jumbotron {
background-color: lightskyblue;
}
table th {
text-align: center;
}
.table {
margin: auto;
width: 50% !important;
}
.table td {
text-align: center;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
line-height: 60px;
color: #fff;
text-align: center;
background-color: #0275D8;
}
a {
color: #f00;
}
a:hover {
color: #0f0;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Test</title>
<meta name="description" content="Test">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="Sticky Footer.css">
</head>
<body>
<nav class="navbar-expand-sm navbar-expand-md navbar-expand-lg navbar navbar-light" style="background-color: #C0C0C0;">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Test <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Test</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Test</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Test
</a>
<div class="dropdown-menu" style="width:300px" aria-labelledby="navbarDropdown">
<div class="container container-sm">
<div class="row">
<div class="col-sm-4">
<a class="dropdown-item" href="#">Test</a>
<a class="dropdown-item" href="#">Test</a>
<a class="dropdown-item" href="#">Test</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
<div class="jumbotron">
<h1 class="display-8">Hello, world!</h1>
<p class="lead-8">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p class="lead">
<a class="btn btn-primary btn-md" href="#" role="button">Learn more</a>
</p>
</div>
<div class="row align-items-center" style="min-height: calc(100vh - 500px);">
<div class="col-xs-3 col-sm-8 col-md-6 col-lg-6 mx-auto">
<div class="input-group-prepend">
<input id='urlurl' type="url" class="form-control" placeholder="Search" pattern="https?://.+" required />
<span class="input-group-btn">
<button class="btn btn-primary" style="background-color: #0275D8; border-color: #0275D8;" type="button" >Test</button>
</span>
</div>
</div>
</div>
<footer class="footer fixed-bottom text-center">
<span class="text">Place sticky footer content here.</span>
</footer>
<!-- jQuery Version 1.11.1 -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Bootstrap Core JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
I try to center vertically menu items "TEST 1","TEST 2" and "BRAND" without successful.
I have tried vertical-align,margin-top and bottom.
I mean, I don't want to put one on top of another, just center between margin top and bottom of the nav bar.
I really appreciate if somebody can help me.
HTML
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-
toggle="collapse" data-target="#menu-collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
BRAND
</div>
<div class="collapse navbar-collapse" id="menu-collapse">
<ul class="nav navbar-nav navbar-center">
<li><a id="menu-right" href="#">TEST 1</a></li>
<li><a id="menu-right" href="#">TEST 2</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><button class="btn btn-primary">Start Now</button></li>
<li><button class="btn btn-primary">Member Login </button>
</li>
</ul>
</div>
</div>
</nav>
CSS
#menu-right:hover {
background: #5d5dc9;
color:#fff;
}
#menu-right {
color:#337ab7;
text-transform: uppercase;
vertical-align: middle;
}
ul {
vertical-align: middle;
}
.button-margin {
border: 1px solid;
}
.navbar-brand {
margin-right: 200px;
}
.navbar {
margin-bottom: 0;
font-family: 'Raleway', sans-serif;
font-size: 1.5em;
font-weight: 800;
text-transform: uppercase;
}
Here is a link to codepen website test : https://codepen.io/fdcoder81/pen/Kymyyj
Thank you very much
If you set the line-height of your a tags to the height of the navbar it should be aligned vertically centered.
Btw both of your:
<a id="menu-right" href="#">
occurences should have classes - you can't have the same id assigned more than one element.
Take
<a class="menu-right" href="#">
And change in your css accordingly to
.menu-right
EDIT:
I played around with your codepen stuff - I don't know if that's the way to go when using bootstrap but it works.
Your HTML:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TEST</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway:400,800" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu-collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
BRAND
</div>
<div class="collapse navbar-collapse" id="menu-collapse">
<ul class="nav navbar-nav navbar-center">
<li>
<a class="menu-right" href="#">TEST 1</a>
</li>
<li>
<a class="menu-right" href="#">TEST 2</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">
<button class="btn btn-primary">Start Now</button>
</a>
</li>
<li>
<a href="#">
<button class="btn btn-primary">Member Login </button>
</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!--<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>-->
</body>
</html>
Your CSS:
.menu-right:hover {
background: #5d5dc9;
color: white;
}
.menu-right {
color:#337ab7;
text-transform: uppercase;
line-height: 54px;
}
.button-margin {
border: 1px solid;
}
.navbar > .container-fluid .navbar-brand {
margin-right: 200px;
line-height: 54px;
padding-top: 0;
padding-bottom: 0;
}
.navbar {
margin-bottom: 0;
font-family: 'Raleway', sans-serif;
font-size: 1.5em;
font-weight: 800;
text-transform: uppercase;
}
.navbar-default .navbar-nav>li>a {
line-height: 54px;
padding-top: 0;
padding-bottom: 0;
}
I was using Bootstrap to create my first website, however the background image in Jumbotron div does not fill the whole width of the screen leaving a narrow margin on both sides, I have tried changing padding, margins, and change width of the div to 100% but it didn't work.
body {
background-color: #ffe6e6;
}
.navbarheight {
height: 60px;
}
#myname {
margin-left: 0px;
font-size: 45px;
}
.allnavicons {
margin-right: 50px;
}
.navicon {
font-size: 25px;
margin-right: 30px;
}
.jumbotron {
width: 100%;
background-image: url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ-H9Giy0rTSpFwziVBPYtGvAPNcDjSTbQpZDJvVV2vXQ6DClHdOQ")
}
#welcome {
text-align: center;
padding-top: 30px;
}
</style>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link href='https://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container-fluid">
<!--Navbar start........................-->
<nav class="navbar navbar-inverse navbar-fixed-top navbarheight">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" id="myname">Mohamed Hegazy</a>
</div>
<div id="navbar" class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav allnavicons">
<li class="active navicon">About
</li>
<li>Portfolio
</li>
<li>Contact
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<!--Navbar end..........................-->
<!--jumbotron container start..........................-->
<div class="jumbotron">
<div class="container">
<h1 id="welcome">Welcome to my Portfolio!</h1>
<p></p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more ยป</a>
</p>
</div>
</div>
<!--jumbotron container end..........................-->
</body>
</html>
add this to your CSS code :
.container-fluid{
padding:0;
}