I'm trying to vertically align a fontawesome icon with some text in a navbar from bootstrap. The vertical size of the navbar is set to 10vh. I'm not able to get the text aligned with the icon, it appears like in the below image:
Also I would like to add some horizontal space between the icon and the text. Here is my code:
<nav class="navbar navbar-expand-lg sticky-top navbar-dark bg-dark h-100">
<ul class="navbar-nav nav-fill w-100">
<li class="nav-item active">
<a class="nav-link d-flex align-items-center justify-content-center" href="#">
<i class="fa fa-home fa-2x icon-white"></i>
<p>Home</p><!--<span class="sr-only">(current)</span>-->
</a>
</li>
... (some more li)
</ul>
</nav>
I've also tried to put the icon inside the paragraph, placing the a element inside a div, and setting both of the same font-size, but I cannot make it work.
Try the following code, it worked for me:
<nav class="navbar navbar-expand-lg sticky-top navbar-dark bg-dark h-100">
<ul class="navbar-nav nav-fill w-100">
<li class="nav-item active">
<a class="nav-link" style="display: flex; align-items: center;" href="#">
<i class="fa fa-home fa-2x icon-white"></i>
<p style="margin-left: 12px;">Home</p>
</a>
</li>
... (some more li)
</ul>
</nav>
Also, here I'm giving the space between the text and the icon as 12px, you can change this according to your need.
You should make the tag a flex container with height 100% (obviously after setting position: relative. Then you can easily do justify-content: center; and align-items: center;
For any other HTML and CSS noob like me, it seems that p elements have margin by default. I have seen this question where it says that CSS 2.1 specification has a default style sheet for basic elements. Removing the bottom margin of the p element made it aligned with the icon.
Regarding horizontal space, DIVYIA BAID's suggestion to set a left margin is exactly what I was looking for.
it's very simple
Try This code for best alignment for Fontawesome or any other icon
<li styles="display:flex">
Home
<i class="fal fa-home" style="vertical-align: middle;margin: auto;"></i>
</li>
Wrap the content in a flex container and then align items center to horizontally align them.
Related
I am simply trying to place an image directly UNDER the navbar. I DO NOT want the nav bar text to overlap the image in any way.
No matter what I do in my code the image stays locked to the end of the navbar. It will not go into its own separate row BELOW the nav bar.
I have tried putting it in its own div, section, p, ul, li, and nothing works.
Is there a way to adjust the image in another contianer, without using the break tags.
<nav id="mainNavbar" class="navbar navbar-dark navbar-expand-md fixed-top">
TEXT
<button class="navbar-toggler" data-toggle="collapse" data-target="#navLinks" aria-label="toggle navigation">
<span class="navbar-toggle-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navLinks">
<ul class="navbar-nav">
<li class="nav-item">
Home
</li>
<li class="nav-item">
About
</li>
<li class="nav-item">
Projects
</li>
<li class="nav-item">
Contact
</li>
</ul>
</div>
</nav>
<br>
<br>
<br>
<br>
<body>
<section>
<div class="container-fluid">
<div class="row">
<div class="col-sm-5">
<img class="img-thumbnail rounded-circle" src="/Users/admin/Pictures/img.jpg" alt="img">
</div>
fixed-top makes nav to be position: fixed, So the vertical height can't be filled. If any further tags are added, those tags will stack to the nav.
To overcome this situation use padding-top of approximate calculation of nav height say 50px. So applying this value to the further tag in your case <body style='padding-top:50px'>
Or else we can use sticky-top, but it is not compatible for all browser yet
I think you must use position sticky instead of position fixed for your navbar
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.
This is what im aiming for (Ignore fancy background)
This is what ive got:
How would I decrease the space between the elements, and centre it in the navbar?
Heres my code so far - Using bootstrap 5
<nav class="navbar bg-primary mt-3">
<div class="container-inline navbar-brand">
<img src="img/logo.png" class="ms-4" width="60" alt="Logo">
<a class="text-light ms-5 fw-bold">TEST</a>
</div>
<a class="nav-link text-light">One</a>
<a class="nav-link text-light">Two</a>
<a class="nav-link text-light">Three</a>
<a class="nav-link text-light">Four</a>
</nav>
When working with Bootstrap's Navbar, only use the supported content. Follow the guidance from the docs...
Navbars require a wrapping .navbar with .navbar-expand{-sm|-md|-lg|-xl|-xxl} for responsive collapsing and color scheme classes.
Navbars and their contents are fluid by default. Change the container to limit their horizontal width in different ways.
Use our spacing and flex utility classes for controlling spacing and alignment within navbars.
So, following this guidance for your Navbar...
Assuming you want it to always remain horizontal, add the navbar-expand class.
The nav-links should be contained inside a navbar-nav (supported content)
Use the spacing/flex utility classes. To center the navbar-nav, use w-100 to create 3 equal width navbar divs/sections. Then justify-content-center on the navbar-nav to center content of the middle section.
<nav class="navbar navbar-expand bg-primary mt-3">
<div class="container-fluid">
<div class="w-100">
<img src="//placehold.it/60x30" class="ms-4" width="60" alt="Logo">
<a class="navbar-bran text-light ms-5 fw-bold">TEST</a>
</div>
<div class="navbar-nav justify-content-center">
<a class="nav-link text-light">One</a>
<a class="nav-link text-light">Two</a>
<a class="nav-link text-light">Three</a>
<a class="nav-link text-light">Four</a>
</div>
<div class="w-100">
</div>
</div>
</nav>
Demo
Since Bootstrap 5 still uses flexbox like Bootstrap 4, aligning Navbar content hasn't changed between the 2 versions.
1. The Problem
I'm trying to mimic Bootstrap's Webpage's Navbar but I'm having no success, despite having the same classes all around. I'm also using Angular and that got me wondering if that was related to something in the TypeScript framework and not with Bootstrap itself — that is the case for the dropdown button for example.
The main issue is that the uls with the menu items and social icons are not forming different rows when the screen width is reduced.
For example, this is what I expected with my website:
And this is what I got instead:
2. The Code
I'm not using anything fancy in Angular at this point, just plain objects' properties (I've tried it with a header instead of a nav also):
<nav class="navbar navbar-expand navbar-light bg-light">
<a
class="navbar-brand mr-0 mr-md-2"
routerLink="/">
Logo
</a>
<div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row">
<li
class="nav-item"
*ngFor="let itemNavbar of itemsNavbar">
<a
[routerLink]="itemNavbar['page']"
[routerLinkActiveOptions]="{exact: true}"
routerLinkActive="active"
class="nav-link">
{{ itemNavbar[langNavbar] }}
</a>
</li>
</ul>
</div>
<ul class="navbar-nav ml-auto">
<li
class="nav-item"
*ngFor="let socialIcon of socialIcons">
<a
class="nav-link"
href="{{ socialIcon.link }}">
<i [ngClass]="socialIcon.icon"></i>
</a>
</li>
</ul>
</nav>
Boy, do I feel stupid for this...
After a lot of time tinkering with the subelements, the mistake was at the top all along. I had accidentally copy-pasted the <nav> element at the top from another page, and, thus, it lacked the flex-column and flex-md-row classes:
<nav class="navbar navbar-expand navbar-light flex-column flex-md-row bg-light">
Anyway, thank you very much for those who tried to help.
I have problem with fixed navbar. I want that my navbar can be scrolled. Ok, I added to my .nav overflow-x: scroll and when I have some nav-items in my navbar, it looks like:
When nav-items 'overflow' navbar, it looks that:
html:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-bottom">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
Ostatnie notowania:
</li>
<li v-for="list in listsList" :class="{ active: checkActive(list.toUrl) }" class="nav-item">
<a #click.prevent="openList(category, list.toUrl)" href="#">{{ list.toView }}</a>
<click-confirm style="display: inline-block;" button-size="sm" :messages="{ title: 'Jesteś pewien?', yes: 'Tak', no: 'Nie' }">
<i #click.prevent="deleteList(category, list.toUrl)" class="fa fa-times" aria-hidden="true"></i>
</click-confirm>
</li>
</ul>
nav {
overflow-x: scroll;
}
I don't know how to fix this, I need help.
check your navbar parent have any fixed width or container width in it, then make it to 100% width to its parent where you have declared any fixed width available.