I am using bootstrap to create my navbar but I am having a problem.
My brand img and brand img is not aligned with my pages names...
I would like the brand img and name Ghiro to be aligned with "Home" "Products" "Services" "About us".
This is my HTML:
<nav class="navbar navbar-expand-lg brand-colors">
<a class="navbar-brand" href="/">
<img src="../../assets/images/ghiro-logo-no-shadow.png" width="50" height="50">
<h5 class="navbar-brand">Ghiro</h5>
</a>
<button class="navbar-toggler custom-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" routerLinkActive="active">
<a class="nav-link" routerLink="/home">Home</a>
</li>
<li class="nav-item">
<a routerLinkActive="active" class="nav-link" routerLink="/products">Products</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="/services">Services</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="/about-us">About us</a>
</li>
</ul>
</div>
</nav>
I am new at programming and could not fix this. If anyone can help me I appreciate.
I am building this website for a friend and I am going to use as my portfolio at the end.
I will post on my github and put the website live.
Thank you!
To change the style of your website you have to use css. To do that there are 2 different options, first you create a new file and link it in your tag in your html file or second write it directly in your "html code" (also in tag). Here an example of the second method:
<head>
<!-- Here is your css code -->
<style>
body{
margin: 0;
padding: 0;
font-family: sans-serif; /* here you can set your favorite font family */
}
nav{
background-color: white; /* set the background color in your navbar to white */
padding-top: 10px;
min-height: 70px;
border-bottom: black 3px solid; /* if you want to have a border under your navbar */
align-items: center;
}
.nav-item{
margin: 0;
padding: 20px;
display: inline-block; /* brings all of your li (nav-item) in one line */
list-style: none;
float: right;
}
.navbar-brand{
float: left;
}
h5{
padding-right: 50px;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg brand-colors">
<a class="navbar-brand" href="/">
<img src="../../assets/images/ghiro-logo-no-shadow.png" width="50" height="50">
<h5 class="navbar-brand">Ghiro</h5>
</a>
<button class="navbar-toggler custom-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" routerLinkActive="active">
<a class="nav-link" routerLink="/home">Home</a>
</li>
<li class="nav-item">
<a routerLinkActive="active" class="nav-link" routerLink="/products">Products</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="/services">Services</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="/about-us">About us</a>
</li>
</ul>
</div>
</nav>
</body>
try this one and test some things in the " part" to customize it, I just don't want to do the whole stuff, this is just to give you some idea.
Related
I am trying to learn Bootstrap. I took the example navbar from the documentation, which is:
<nav class="navbar navbar-expand-lg navbar-light bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
<div>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
Then I added this to my CSS file:
.navbar-collapse {
background-color: #fff;
}
However, the width of the collapse menu isn't 100% of the screen so the left and right side of the collapse menu do not change when I do this. I can remove the padding of the whole navbar but that messes up everything and I feel like there should be an easier way to do this. Is there really or should I just suck it up and adjust everything separately after removing the padding?
The easiest way would be to add a negative margin and then counteract with padding...
.navbar-collapse {
background-color: #fff;
margin-left: -15px;
margin-right: -15px;
padding-left: 15px;
padding-right: 15px;
}
Demo
I have a navigation bar with height changed to 2.5rem due to which the toggler is not displaying any menu items. If I change is back to default it works fine. Right now the icon appears as below -
Please help me fix this.
Below is my code -
HTML -
<body>
<nav class="navbar navbar-expand-lg " id="header-bar">
<button class="navbar-dark navbar-toggler" type="button" data-
toggle="collapse"
data-target="#navbarSupportedContent" aria-
controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">ITEM1 <span class="sr-only">
(current)</span></a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">ITEM2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ITEM3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ITEM4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ITEM5</a>
</li>
</ul>
</div>
</nav>
CSS -
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: sans-serif;
font-size: 16px;
}
nav {
background:#001a33;
height: 2.5rem;
}
.navbar-nav .nav-link{
color: white;
}
Thanks in advance !
Adding py-0 class to the nav tag solves the problem (to adjust height of the navbar). Changing height attribute messes with the hamburger content alignment-that has to be removed.
I have a navbar on my page but for some reason only the 'homepage' link is pure white. the rest of the links are not as bright. I am trying to create a transparent navbar with a picture as a background. i have managed to do that but the 'Home' link is considerably brighter and more prominent then the rest of the links. the image can be seen below:
<div class="container-fluid p-0">
<nav class="navbar navbar-expand-lg fixed-top navbar-dark">
<a class="navbar-brand" href="#">
<i class="fas fa-mountain fa-2x mx-3"></i>Greatness</a> <!--This is the icon for the brand-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false"
aria-label="Toggle navigation">
<i class="fas fa-align-right text-light"></i>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<div class="mr-auto"></div>
<ul class="navbar-nav justify-content-center">
<li class="nav-item active">
<a class="nav-link" href="indexHome.html">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="AboutUs.html">ABOUT US
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">IDEAS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">MOTIVATION</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">LOG IN</a>
</li>
</ul>
</div>
</nav>
</div>
CSS
.nav-item:last-child{
padding-right: 10.5em;
}
.nav-item{
padding: 0.9em;
color: white;
font-size: 17px;
}
.navbar-brand{
padding-left: 8em;
}
It is because an active class is defined in the li which is wrapped around it, like <li class="nav-item active">. Add the active class to its siblings and it should work.
I am looking for a way to have a bigger navbar-brand (bootstrap 4) than the height of the navbar itself. So the navbar-brand should overlap the navbar. Currently it seems that the navbar height is increased to fit the navbar-brand.
My HTML looks like:
<nav class="navbar navbar-expand-lg navbar-custom fixed-top top-menu-4">
<div class="container">
<div class="navbar-brand">
<img src="https://via.placeholder.com/350x170.png" width="350px" height="170px" alt="">
</div>
<button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="none.html">Example 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="none.html">Example 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="none.html">Example 3</a>
</li>
</ul>
</div>
</div>
</nav>
So what I want is something like an overlap:
Give a fixed height to the .navbar and apply transform for .navbar-brand
.navbar {
height: 100px;
background-color: rgba(255, 255,255, 0.9);
}
.navbar-brand {
transform: translateY(calc(50% - 30px));
}
Find the fiddle here
You can set the height of the .navbar to some fixed value and since you're using flexbox on your .container you can align the .nav-brand element to the top of it.
See below for details:
.navbar .container {
height: 100px; /* change this to whatever value you want */
}
.navbar-brand {
align-self: flex-start;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-custom fixed-top top-menu-4">
<div class="container">
<div class="navbar-brand">
<img src="https://via.placeholder.com/350x170.png" width="350px" height="170px" alt="">
</div>
<button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="none.html">Example 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="none.html">Example 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="none.html">Example 3</a>
</li>
</ul>
</div>
</div>
</nav>
You should apply absolute position on your image.
.navbar-brand img {
position: absolute;
top: 10px;
left: 30px;
max-height: 100px;
object-fit: contain;
}
You can simply make the navbar-brand position:absolute...
.navbar-brand {
top:0;
position: absolute;
}
Demo: https://www.codeply.com/go/sJc3uCUL5s
I tried to use background image in Bootstrap 4 nav bar live attached, and I am finding it difficult. I saw a few code but didn't work.
I tried as well to add a div before the nav bar to see if that will solve it, it still didn't.
I am using Bootstrap 4 Beta 2. What could I be doing wrong?
Topnav
html,
body {
height: 100%;
}
body {
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
color: #6c6f73;
font-size: 0.9rem;
background-color: #EEE;
}
.header-feature {
min-height:400px;
background: #201D1D url('assets/img/bg/engineer-background.png');
//background: #222 url('assets/img/bg/engineer-background.png') center center no-repeat;
// background: url('assets/img/bg/engineer-background.png');
background-size: cover;
color: #FFF;
font-size: 0.8rem;
padding: 0.5rem;
}
.header-feature p {
font-size: 1rem;
}
<div class="header-feature ">
<nav class="navbar navbar-expand-lg ">
<a class="navbar-brand" href="#"><img src="assets/img/logo.png" height="50" /></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 ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#"> <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">FOR HR</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">SIGNUP</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">LOGIN</a>
</li>
</ul>
</div>
</nav>
<div class="header-div">
<!-- <img src="assets/img/bg/engineer-background.png" /> -->
<h1>Are you in the groove?</h1>
<p>
Share with us
</p>
Get Started
</div>
</div>