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>
Related
This question already has answers here:
Missing visible-** and hidden-** in Bootstrap
(13 answers)
Closed 2 months ago.
<body>
<header>
<nav class="navbar navbar-expand-md navbar-light" style="background-color:#f6b319">
<div class="container-fluid">
<div class="navbar-header">
<a href="index.html" class="float-start .d-none .d-lg-block .d-xl-none">
<div id="logo-img" alt="Logo image"></div>
</a>
<div class="navbar-brand">
<h1>Example 1</h1>
<p>
<img src="R.png" alt="Korsher certification">
<span>Kosher Certifield</span>
</p>
</div>
</div>
</nav>
</header>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
i wanted the website can be visible only lg or md devices otherwise the logo will be hidden.
You need to add both, Bootstrap CSS and Bootstrap JS.
To hide logo on mobile, add Bootstrap classes d-sm-block d-none.
See the snippet below.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<body>
<header>
<nav class="navbar navbar-expand-md navbar-light" style="background-color:#f6b319">
<div class="container-fluid">
<div class="navbar-header">
<a href="index.html" class="d-sm-block d-none">
<div id="logo-img" alt="Logo image">Logo</div>
</a>
<div class="navbar-brand">
<a href="index.html">
<h1>Example 1</h1>
</a>
<p>
<img src="R.png" alt="Korsher certification">
<span>Kosher Certifield</span>
</p>
</div>
</div>
</div>
</nav>
</header>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
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 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>
I want the social media icons at the right side above my navigation bar, but when I float them at the right it blends in with the navigation bar, can someone help?
I already tried the positions fixed and absolute, but it doesn't work.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles/index.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Branco</title>
</head>
<body>
<header>
<div class="container-fluid">
<div style="align-content:right" class="social-icons float-right">
<a href="https://www.instagram.com/brancoschoenaker/" target="_blank">
<img src="assets/instagram-icon.png">
</a>
<a href="https://twitter.com/SchoenSchaap" target="_blank">
<img src="assets/twitter-icon.png">
</a>
<a href="https://www.reddit.com/user/LilPutje" target="_blank">
<img src="assets/reddit-icon.png">
</a>
<a href="https://www.youtube.com/channel/UCw2amewef_lsD1sU8X5mhjw?view_as=subscriber" target="_blank">
<img src="assets/youtube-icon.png">
</a>
</div>
</div>
<nav class="navbar navbar-light bg-light" >
<div class="container-fluid">
<a class="navbar-brand" href="index.html">
<h1>Branco</h1>
</a>
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link active nav-text" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active nav-text" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link active nav-text" href="mailto:brancoschoenaker#gmail.com">Contact</a>
</li>
</ul>
</div>
</nav>
<header>
</body>
</html>
So, i want the social media icons top right (and yes i'm going to make them smaller
<div style="align-content:right" class="social-icons float-right">
find the above line in your code and replace it with below given line of code.
<div style="text-align: right" class="social-icons">
In Bootstrap 3 how do I get the navbar-right to work correctly on mobile? In my project for some reason when the browser shrinks down it puts my navbar-right item on the next line.
I've tried setting pull right on it, and setting pull-left on the brand image, but no luck.
I'm assuming there is something I'm doing wrong in Bootstrap or a class I need to add. Please help.
Here is what it looks like on mobile:
Here is what I want it to look like on mobile:
On desktop it works fine.
Here is my navbar html:
<header>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a href="/">
<img src="/assets/dot-logo-91x50.png">
</a>
</div>
<div class="navbar">
<ul class="nav navbar-nav navbar-right">
<a class="navbar-brand" href="/apply/">Continue Application</a>
</ul>
</div>
</div>
</nav>
</header>
Please help.
Following Bootstrap 3 styling, your navbar element should show the mobile toggle button when in responsive resolution, like in this example.
If you want to have only those two elements of your interface in the same position inside a navbar element you could edit your html as follows:
<header>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/">
<img src="/assets/dot-logo-91x50.png">
</a>
<a class="navbar-brand pull-right" href="/apply/">Continue Application</a>
</div>
</div>
</nav>
</header>
But I suggest you to implement a mobile toggle button with a collapsed menu to improve your users experience.