I have this code and i want to replace the "text example" with a image of my own.
I tried replacing it with CSS but i made it worst.
Thanks in advance.
<nav class="navbar navbar-b navbar-trans navbar-expand-md fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll" href="#page-top">text example</a>
Try this method.
<a class="navbar-brand js-scroll" href="#page-top">
<img src="..." alt="Image_description">
</a>
if you are using the bootstrap CDN you can add more styles if you prefer
and then try using
<a class="navbar-brand js-scroll" href="#page-top">
<img src="..." class="img-fluid" alt="Responsive image">
</a>
Related
I am using bootstraps navigation bar and I inserted an image to the navbar brand yet because of the size it messes up the alignment. I want the text that goes along with it to line up with the middle of it like it is, yet I can't figure out how to get the other button text to line up with it as well.
This is what it looks like Output
<a class ="navbar-brand" id="home" href="/">
<img src="https://cdn.discordapp.com/attachments/901496285759168554/1045812932535128084/jeffersonlogo.webp" width="40" height="60" class="d-inline-block align-middle" alt="">
Jefferson Robotics</a>
<a class="nav-item nav-link" id="water" href="/underwater">Underwater</a>
<a class="nav-item nav-link" id="sky" href="/aerial">Aerial</a>
<a class="nav-item nav-link" id="earth" href="/land">Land</a>
I tried using alignments on the nav-items but it doesn't change anything no matter what I do, this is my first time using bootstrap and I have limited html knowledge so I am quite lost on what to do :(
You can try using d-flex align-items-center classes from bootstrap on both parent element to all the <a> tags and also on the navbar-brand <a> tag like below. This will center the elements vertically.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex align-items-center">
<a class="navbar-brand d-flex align-items-center" id="home" href="/">
<img src="https://cdn.discordapp.com/attachments/901496285759168554/1045812932535128084/jeffersonlogo.webp" width="40" height="60" class="d-inline-block align-middle" alt=""> Jefferson Robotics</a>
<a class="nav-item nav-link" id="water" href="/underwater">Underwater</a>
<a class="nav-item nav-link" id="sky" href="/aerial">Aerial</a>
<a class="nav-item nav-link" id="earth" href="/land">Land</a>
</div>
Not sure what's wrong with your implementation. I tried wrapping your code snippet with the nav container as mentioned in bootstrap's documentation and it looks fine:
a.nav-item {
color: white;
}
a.nav-item:hover {
color: yellow;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand" id="home" href="/">
<img src="https://cdn.discordapp.com/attachments/901496285759168554/1045812932535128084/jeffersonlogo.webp" width="40" height="60" class="d-inline-block align-middle" alt=""> Jefferson Robotics</a>
<a class="nav-item nav-link" id="water" href="/underwater">Underwater</a>
<a class="nav-item nav-link" id="sky" href="/aerial">Aerial</a>
<a class="nav-item nav-link" id="earth" href="/land">Land</a>
</nav>
maybe you were just missing that wrapper? or maybe you didn't include the styling for bootstrap in your static styles in you HTML file?
I added my logo to my navbar, but then something strange happened. Every item in my navbar that contains more than one word, seperated with a space, gets pushed back. See image below:
Current navbar issue
Since I'm not that experienced I tried to search for common fixes for this as I could not see any problems with my code.
I tried display: infline-flex; !important
but without success.
navbar-brand position: absolute; left: 50%;
seems to work, but I can't place it to the left side of the navbar this way
this is what my navbar code looks like:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar fixed-top navbar-expand-md bg-light navbar-light py-3 shift" id="mainNav">
<div class="container">
<a href="#" class="navbar-brand">
<img src="img/jd_full.png" width="20%" alt="logo" />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navmenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse nav-container" id="navmenu">
<ul class="navbar-nav ms-auto text-uppercase">
<li class="nav-item">
over mij
</li>
<li class="nav-item">
opleiding
</li>
<li class="nav-item">
stage
</li>
<li class="nav-item">
realisaties
</li>
</ul>
</div>
</div>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.min.js"></script>
I checked for padding on the navbar-brand class, but no results.
Anyone knows a fix for this?
your problem is caused by the width you set, for logos use a fixed size equivalent to the proportion of your navigation bar.
change this <img src="img/jd_full.png" width="20%" alt="logo">
for this other <img src="img/jd_full.png" width="120px" alt="logo">
I was trying bootstrap logo in navbar and the logo is not showing I have tried many things.
I am trying <nav> tag I am pasting my code also I am also not using any CSS:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">
<img class="lg" src="F:\html\musicbrand\logo1.jpg" alt="logo" style="width:40px;" />
</a>
</nav>
The issue maybe because of the image path
<img class="lg" src="F:\html\musicbrand\logo1.jpg" alt="logo" style="width:40px;" />
Make a folder name img within the folder where you have your html file
and change the src path to
<img class="lg" src="img/logo1.jpg" alt="logo" style="width:40px;" />
Thanks everyone who have answered.
I have been able to figure out the problem as giving full path was the problem.
Again thanks everyone.
Try this, but if you put your image under a folder at the same hierarchy then it will be good practise!
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img class="lg" width="130px" height="70px"src="{% static "F:\html\musicbrand\logo1.jpg"%}" style="position:relative;top:-10px">
</a>
</div>
</nav>
I am attempting to make a simple navbar/menu for my website using bootstrap. I have a logo and a title, but I can not get them to align correctly. They either stack or the title is shifted all the way to the right of the navbar (as is in the provided code.) I have included the code I feel is applicable. This is my first experience with anything front end, any help would be appreciated.
HTML
<header>
<nav class="navbar navbar-default">
<div class="container">
<a href="index.html" class="navbar-left">
<img
src="img/logo-placeholder.png"
height="115"
width="115"
alt="company logo"
/>
</a>
<a href="index.html" class="navbar-brand">
<h1>Title</h1>
</a>
</div>
</nav>
</header>
You can give img the classes d-inline-block and align-top. Check out the snippet.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<header>
<nav class="navbar navbar-default">
<div class="container">
<a class="navbar-brand" href="#">
<img src="img/logo-placeholder.png" height=115 width =115 alt="company logo" class="d-inline-block align-top">
<h1 class="d-inline-flex">Title</h1>
</a>
</div>
</nav>
</header>
Using bootstrap 3, heres the snippit from the navbar. Both are in a span so should be inline?
<a href="#">
<span><img src="images/brand/pgblocks-logo-white-nostrap.png" class="brand-img img-responsive"></span>
<span><h3>test test</h3></span>
</a>
Try this
<nav class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<span><img src="#"/></span>
Logo Title
</a>
</div>
</nav>
Try this :)
span img {
float:left;
}
<a href="#">
<span><img src="https://www.ucl.ac.uk/prospective-students/graduate/images/test/placeholder-200x200"></span>
<span><h3>test test</h3></span>
</a>
Because h3 is a block element.
<a href="#">
<span><img src="images/brand/pgblocks-logo-white-nostrap.png" class="brand-img img-responsive"></span>
<span><h3>... Because h3 is a block element</h3></span>
</a>
<a href="#">
<span><img src="images/brand/pgblocks-logo-white-nostrap.png" class="brand-img img-responsive"></span>
<span>Span is an inline element</span>
</a>