How to align bootstrap navigation bar text with image? - html

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?

Related

Aligning icons on the right hand side on Navbar Bootstrap

Two issues:
I am trying to put the social icons more on the right beside 'reserve table' button but fail to do so
When i collapse the navbar the hamburger icon appears to the left of the 'reserve table'
In CSS classes nothing else just background color only so nothing in css file anything.
Any help or suggestions
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg core-header navbar-light">
<div class="container">
<a href="#" class="navbar-brand"> <img class="image_size" src="/images/logo1.png" alt="Logo">
</a>
<button type="button" class="navbar-toggler bg-light" data-toggle="collapse" data-target="#nav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="nav">
<ul class="navbar-nav">
<li class="nav-item">
Menu
</li>
<li class="nav-item">
Contact
</li>
<li class="nav-item">
About
</li>
</ul>
<div class="navbar-nav">
<a target="_blank" class="social_icons_items nav-item nav-link" href="https://youtube.com"><i class="fab fa-youtube text-white"></i></a>
<a target="_blank" class="social_icons_items nav-item nav-link" href="https://youtube.com"></a>
</div>
</div>
<div class="reserve">
<a target="_blank" class="button bg-white reserve-table" href="#">Reserve a Table</a>
</div>
</div>
</nav>
I am trying to put the social icons more on the right beside 'reserve table' button but fail to do so.
Solution
add class ml-auto to <div class="navbar-nav"> which will move social icons to right side.
When i collapse the navbar the hamburger icon appears to the left of the 'reserve table'
Solution
The reason that is happening because 'container' is flex container and when navbar-collapse div is shown (which has 100% width) expands and takes space which falls the reserve button. So you need to remove 'remove button' div within <nav> and keep it next to <nav> tag and style accordingly.
Hope this helps.

Is there a way to make navbar logo responsive?

So, here is the website I've built using bootstrap 4.
I have a big issue with the logo, as it keeps the same size on all devices.
I've tried adding img-fluid, but if I add this class, the logo shrinks so much on mobile phones, that it looks like a tiny dot. So I've removed this class. Now, on mobile, the hamburger moved on the second line and on the first line of the navbar is the 310 px logo that doesn't even show completly. I want to keep this spacing between the navbar elements as it now, but I think the problem that may be actually comes from my css:
.navbar .navbar-brand {
padding: 5px 200px;
}
.navbar-nav>li {
padding-left: 5px;
padding-right: 5px;
}
.navbar-nav>li {
margin-left: 5px;
margin-right: 5px;
}
This is my html:
<nav class="navbar navbar-light navbar-expand-xl fixed-top ">
<!-- Brand/logo -->
<a class="navbar-brand "> <img src="x" alt="logo" style="width: 310px"></a>
<button class="navbar-toggler" data-target="#collapsingNavbarLg" data- toggle="collapse" type="button">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="collapsingNavbarLg">
<!-- Links -->
<ul class="navbar-nav float-right text-right pr-3">
<li class="nav-item">
<a class="nav-link py-0" href="/" style="font-size: 130%;">Home</a>
</li>
<li class="nav-item">
<a class="nav-link py-0" href="ChiSono" style="font-size:130%;">Chi Sono</a>
</li>
<li class="nav-item">
<a class="nav-link py-0" href="Servizi" style="font-size:130%;">Servizi</a>
</li>
<li class="nav-item">
<a class="nav-link py-0" href="Contattaci" style="font-size:130%;">Contattaci</a>
</li>
<li class="nav-item">
<a class="nav-link py-0" href="AreaClienti" style="font-size:130%;"> Area Clienti</a>
</li>
</ul>
</div>
</nav>
That 200px from padding also keeps the same, and maybe this is why I get all this issue. I am not sure. Also the space between the li elements, as I shrink the page until the point it becomes hamburger. But is there a way to still keep this spacing for my navbar elements, that also resizes? Or is there another way to fix this? Thank you!
I moved everything into a container so that you do not have to use 200px padding to move your logo. This lets the navigation sit similarly to the dimensions/look you had in your code without forcing the position of the elements.
This will let allow you to position your nav items to the right using a css class I added called .navbar-right.
But, because of the new positioning I added another media query to move the hamburger menu. (You may not need this in your coding environment because I was working straight off my desktop with just the CSS, also JS is not added to the example.)
Hope this helps.
.navbar-right {
position: absolute;
right: 0;
}
.relative {
position: relative;
}
#media only screen and (max-width:768px) {
.navbar-brand {
max-width: 100px;
}
/* below is for the demo but might help you position
the hamburger menu on mobile */
.navbar-toggler {
right: 0;
position: absolute;
margin: 10px;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container relative">
<div class="row">
<a class="navbar-brand" href="#">
<img class="img-fluid" src="http://www.studiopirrera.com/Images/ui.png" alt=" ">
</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 navbar-right">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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 dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</nav>
The best option would be to create diffenrent images files for different view port sizes.
With the srcset attribute, you can select which image should show in which case.
Here an example:
<img src="small.jpg" srcset="small.jpg 320w, medium.jpg 600w, large.jpg 900w" alt="my company">
You give the name/location of the image file, followed by a space and the view port size, when the image should show. It describes until which width (that's why it's w) the image should show. The example above translates to:
the small.jpg is shown until a view port width of 320px
the medium.jpg is shown until a view port width of 600px
the large.jpg is shown until a view port width of 900px
More detailed information can be found here: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
The positioning can be archieved by the information form brooksrelyt's answer
I solved this problem using an vw units width of image.
This allows the element's aspect ratio to be preserved, based on the viewport width
.navbar-brand img {
max-width: 11vw; /* find suitable value for you */
display: block;
width: 100%;
}

Socials blending in with navbar

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">

How to display Bootstrap 4 navigation bar links next to each other and floating to the right?

I'm trying to create a navigation bar in which the brand logo is on the left, but the navigation bar links are on the right. At the moment, the navbar links are on the right but are displayed on top of each other instead of next to each other:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Peek Solutions</a>
<div class="navbar-nav justify-content-end">
<a class="nav-item nav-link" href="#">About</a>
<a class="nav-item nav-link" href="#">Services</a>
<a class="nav-item nav-link" href="#">Contact</a>
</div>
</nav>
I've tried to right-align them using .justify-content-end following https://getbootstrap.com/docs/4.0/components/navs/, but so far it's not looking the way I want it. (I've also looked at the Bootstrap 4 source code but wasn't able to quickly determine what the issue was).
Update
If I use the following snippet,
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Peek Solutions</a>
<div class="navbar justify-content-end">
<a class="nav-item nav-link" href="#">About</a>
<a class="nav-item nav-link" href="#">Services</a>
<a class="nav-item nav-link" href="#">Contact</a>
</div>
</nav>
then the positioning is as desired (see https://jsfiddle.net/qxdsam8t/10/) but the color of the links reverts to its default color of blue, instead of the light gray theme color. If I add the class navbar-nav to the inner div, then the colors go back to the theme colors, but the display is 'stacked' like I started out with. It seems that these properties are 'coupled'; how can I get the colors but not the 'stacking'?
The menu item stacking happens due to the .navbar-expand-lg class. xs/sm/md viewports will stack the menu items since the rendering should be stacked once the collapsed menu view (hamburger menu) is being used. You can see I changed it to .navbar-expand-sm to hopefully illustrate this better when running the code snippet (depending on how wide your browser is).
Also, add .justify-content-between to the <nav> element to right align the nav or you can add .ml-auto to the .navbar-nav <div> or even use .w-100 along with .justify-content-end to force nav to be full width.
You'll probably want to wrap the .navbar-nav element with: <div class="collapse navbar-collapse"></div> and include a navbar toggler button, similar to their documentation: https://getbootstrap.com/docs/4.0/components/navbar/#toggler
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark justify-content-between">
<a class="navbar-brand" href="#">Peek Solutions</a>
<div class="navbar-nav justify-content-end">
<a class="nav-item nav-link" href="#">About</a>
<a class="nav-item nav-link" href="#">Services</a>
<a class="nav-item nav-link" href="#">Contact</a>
</div>
</nav>
The document you linked states to use either a <ul> element or a <nav> element.
Classes are used throughout, so your markup can be super flexible. Use
<ul>s like above, or roll your own with say a <nav> element. Because
the .nav uses display: flex, the nav links behave the same as nav
items would, but without the extra markup.
<nav class="nav">
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
</nav>
Your setup is not good at all. Take a look at bootstrap documentation here. To align your nav to right use "ml-auto" bootstrap class in ul element in your nav. Bootstrap 4 is all about flexbox layout, so you have to be really precise with HTML markup.

Bootstrap - Position 1 item to the left while preserving another item's center position

I cannot think of a way to have the logo on the left of the navbar but for the items to be perfectly centered. I tried using margin auto for the items but then they move further right away from the center because of the logo taking up space.
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="collapse navbar-collapse justify-content-center d-flex">
<a class="navbar-brand">WIDE-LOGO-TEXT</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link">Home</a>
</li>
<li class="nav-item">
<a class="nav-link">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link">Services</a>
</li>
<li class="nav-item">
<a class="nav-link">Contact Us</a>
</li>
</ul>
</div>
</nav>
<!-- Second NavBar: -->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="collapse navbar-collapse d-flex">
<a class="navbar-brand">WIDE-LOGO-TEXT</a>
<ul class="navbar-nav" style="margin: 0 auto;">
<li class="nav-item">
<a class="nav-link">Home</a>
</li>
<li class="nav-item">
<a class="nav-link">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link">Services</a>
</li>
<li class="nav-item">
<a class="nav-link">Contact Us</a>
</li>
</ul>
</div>
</nav>
https://www.codeply.com/go/DUmlhXetYE
As you can see from the preview link above, the 2nd navbar items are in the exact same position at the first navbar items. The problem is that I want these to be perfectly centered as though the logo was never there. Therefore I need the nav items to shift to the left to be perfectly centered and unaffected by the logo.
How can I do this? Hope that makes sense!
EDIT: Image to illustrate issue more clearly:
There are 2 way to fix your problem.
1) Logo class apply css position: absolute and parent class apply css position: relative;
2) Menu Class navbar-nav apply css transform: translateX(-80px); you can get navigation center align. as per your expectation.
Use absolute positioning:
.navbar-brand {
position: absolute;
left: 16px;
}
Please use Bootstrap 4 for this kind of predefined library of css.
Copy paste the below code you found the result
enter image description here
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-sm">
<button class="navbar-toggler mr-2" type="button" data-toggle="collapse" data-target="#navbar">
<span class="navbar-toggler-icon"></span>
</button>
<span class="navbar-brand d-flex flex-fill">WIDE-LOGO-TEXT</span>
<div class="navbar-collapse collapse" id="navbar">
<ul class="navbar-nav justify-content-center d-flex flex-fill">
<li class="nav-item">
<a class="nav-link">Home</a>
</li>
<li class="nav-item">
<a class="nav-link">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link">Services</a>
</li>
<li class="nav-item">
<a class="nav-link">Contact Us</a>
</li>
</ul>
</div>
<div class="d-flex flex-fill"><!--spacer--> </div>
</nav>
<div class="container-fluid">
<h5 class="text-center">--center--</h5>
</div>
</body>
</html>
Best of luck :)