Align navigation bootstrap center - html

I want to center align the navigation links from Bootstrap but since I'm not using the list structure, all solutions don't work.
<section id="menuNavigation">
<div class="container-fluid">
<nav class="navbar navbar-expand-lg">
<button class="navbar-toggler" type="´button" data-toggle="collapse" data-target="#navbarHeader">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarHeader">
<ul class="navbar-nav">
Uniongs
Sobre
Seja Assinante
Blog
Publicidade
</ul>
</div>
</nav>
</div>
</section>
I tried everything: text-center, text-align: center, justify-content-center and nothing works.

Your HTML is invalid. ul can only have li as children. Try using a div instead.
Then use the flexbox helper classes available to you in BS4.
<div class="navbar-nav d-flex justify-content-center">
Then we just make the menu full width by adding flex:1. The reason the list items wouldn't center is because the menu was not full width and itself, left aligned.
View in Full Page mode.
.navbar-nav {
flex: 1;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<section id="menuNavigation">
<div class="container-fluid">
<nav class="navbar navbar-expand-lg">
<button class="navbar-toggler" type="´button" data-toggle="collapse" data-target="#navbarHeader">
<span class="navbar-toggler-icon">Toggle</span>
</button>
<div class="collapse navbar-collapse " id="navbarHeader">
<div class="navbar-nav d-flex justify-content-center">
Uniongs
Sobre
Seja Assinante
Blog
Publicidade
</div>
</div>
</nav>
</div>
</section>

Just CSS code added. hope this help you.
.navbar-nav {
text-align: center;
width: 100%;
float: left;
display: inline-block;
}
.nav-link {
float: none;
display: inline-block;
padding:0 10px;
}
<section id="menuNavigation">
<div class="container-fluid">
<nav class="navbar navbar-expand-lg">
<button class="navbar-toggler" type="´button" data-toggle="collapse" data-target="#navbarHeader">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarHeader">
<ul class="navbar-nav">
Uniongs
Sobre
Seja Assinante
Blog
Publicidade
</ul>
</div>
</nav>
</div>
</section>

Related

Flex div always take remaining height

I'm making a web page but I'm having a hard time making it responsive and fit my desires.
I'm making a login page with an alert box, the alert will only appear if the user types a wrong password or email.
What I want to happen is for the main div (flex-3) content to be centered on the page and when the alert (flex-2) appears for the page to not have a scroll wheel, so flex-3 kinda has to calculate the remaining height of the page and be centered, and obviously all of this has to work no matter the device resolution.
I tried doing this with flex div but the closest I got made so the alert increased the total height of the page, so it would have a scroll wheel with no content at the bottom.
html,
body {
color: #fff;
height: 100%;
min-height: 100%;
}
.flex-1 {
flex: 1;
background-color: red;
}
.flex-2 {
display: flex;
background-color: green;
}
.flex-3 {
display: flex;
background-color: black;
}
<html>
<head>
<!-- import bootstrap css -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<!-- import jquery and bootstrap -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</head>
<body class="d-flex flex-column">
<header>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="#">
<img src="" class="d-inline-block align-top" alt="">
</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 justify-content-end" id='navbarNav'>
<ul class="navbar-nav navbar-right">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
</ul>
</div>
</nav>
</header>
<main class="flex-1">
<div class="flex-2 d-flex alert-test">
<h1>TEST</h1>
</div>
<div class="flex-3 d-flex justify-content-center align-items-center">
<h1>TEST</h1>
</div>
</main>
</body>
</html>
This is how I made your solution working.
Added display: flex; flex-direction: column; to flex-1 to make the 2nd point working.
Added flex-grow: 1 to flex-3 class to make the dive stretch in remaining area.
Only by adding display: flex to the parent class flex-1, the flex grow property of child class, flex-3 works.
Hope this is the solution that you are looking for.
html,
body {
color: #fff;
height: 100%;
min-height: 100%;
}
.flex-1 {
display: flex;
flex-direction: column;
flex: 1;
background-color: red;
}
.flex-2 {
display: flex;
background-color: green;
}
.flex-3 {
display: flex;
flex-grow: 1;
overflow: auto;
background-color: black;
}
<!-- import bootstrap css -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
/>
<!-- import jquery and bootstrap -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<body class="d-flex flex-column">
<header>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="#">
<img src="" class="d-inline-block align-top" alt="" />
</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 justify-content-end"
id="navbarNav"
>
<ul class="navbar-nav navbar-right">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
</ul>
</div>
</nav>
</header>
<main class="flex-1">
<div class="flex-2 d-flex alert-test">
<h1>flex-2 TEST</h1>
</div>
<div class="flex-3 d-flex justify-content-center align-items-center">
<h1>flex-3 Test</h1>
</div>
</main>
</body>

How to add some text between logo and menu items with bootstrap?

I try a couple of ways but not very successful. Below is part of the code.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#my-navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="img/logo.svg">Demo</a>
</div>
<div class="collapse navbar-collapse" id="my-navbar">
<ul class="nav navbar-nav navbar-right">
Basically, I have logo on the left side and a couple of menu items to the right. There is some space between logo and menu where I want to insert some text. The text should be aligned along the same horizontal line with logo and menu. So far, I haven't found a satisfactory way of doing it.
You didn't mention the location of some text on small screens. I assume you want the text to be on the top of #my-navbar.
My approach is to create another .navbar-collapse to contain the text, and change the navbar-toggler to target .navbar-collapse.
HTML Structure (Bootstrap 4.1)
<nav class="navbar">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Demo</a>
<button class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<div class="navbar-text">
Navbar text
</div>
</div>
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item active"></li>
<li class="nav-item"></li>
<li class="nav-item"></li>
...
</ul>
</div>
</div>
</nav>
On small screens, this structure already align everything up perfectly because bootstrap sets flex-basis: 100%; on .navbar-collapse except you need to set display:flex; on .navbar-header so that the branding is on the left and the toggler is on the right:
.navbar-header {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
flex-grow: 1;
}
On large screens, since bootstrap sets justify-content:space-between; already on the .container-fluid, the .navbar-header, first .navbar-collapse that contains the text and the second .navbar-collapse that contains the menu are already in the correct position. The only thing you need to do is to align the text to center, and the menu to the right.
You can create your own css class and style that on your own. Or you might just use bootstrap utility class justify-content-center and justify-content-end:
<div class="collapse navbar-collapse justify-content-center">
<div class="navbar-text">
Navbar text
</div>
</div>
<div class="collapse navbar-collapse justify-content-end">
<ul class="navbar-nav">
<li class="nav-item active"></li>
<li class="nav-item"></li>
<li class="nav-item"></li>
...
</ul>
</div>
fiddle: https://jsfiddle.net/aq9Laaew/175839/

Text wont center on phone

I have a weird problem here, the text and images aren't aligning to the center, I've been coding this site from scratch and it works pretty well when I test it on the computer, but when I try it on the phone it doesn't work. Here are the pictures (From the computer and the phone)
---------COMPUTER
Computer's resized Firefox windows 1
---------PHONE
Phone's screenshot 1 - Chrome
Here's my code, I've been using bootstrap and normal HTML, CSS and basic PHP and JavaScript
<nav class="navbar navbar-default nav_menu_head">
<div class="container-fluid">
<div class="row">
<nav class="navbar navbar-default nav_menu_head">
<div class="container-fluid">
<div class="row">
<div class="navbar-header">
<div class="col-md-6 col-xs-10">
<a href="index.php" class="navbar-brand" rel="home">
<img class="img-responsive logo" src="img/logo2.png"></a>
</div>
<div class="col-xs-2">
<button type="button" class="navbar-toggle navbar_colapse" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse col-md-6 text-justify-xs" id="myNavbar">
<ul class="nav navbar-nav navbar-right nav_menu_head" >
<li ><a href="index.php#empresa" >EMPRESA</a></li>
<li >PRODUCTO</li>
<li>CONTACTO</li>
<!-- <li >SOPORTE TÉCNICO</li -->
</ul>
</div>
</div>
</nav>
And here´s the CSS
.text_box{width: 100%;
height: 200px;}
.navbar-header{float: none;}
.text-justify-xs {
text-align: center;
}
.img-responsive.menu_image{margin: 0 auto;}
.collapse.navbar-collapse.col-md-6.text-justify-xs {border-width: 0px;}
This looks like a mismatch between the display property values on your ul. It's not uncommon for browsers to have different default values. Try setting display: block on your .nav_menu_head.
try :
.text-justify-xs ul li a {
text-align: center;
}
in your css

Bootstrap navbar: Width of left element affects position of element in the center

I'm new to bootstrap 3. At the moment I want to allign my navbar to the center. I did this with this approach, which works fine.
Now my Problem is that the width of my navbar-brand element affects the position of the centered stuff,e.g. the elements are moving to the left, if the branding gets bigger. Is there a way to position a element of the navbar at the "real" center of the screen?
It looks like that at the moment:
But I want at the real center of the screen like that, but with the brand:
My html:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand navbar-left" href="#"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
Services<span class="caret"></span>
<ul class="dropdown-menu">
<li>Stuff</li>
</ul>
</li>
<li>Karriere</li>
<li>Über uns</li>
<li>Kontakt</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
My CSS:
#media (min-width: $grid-float-breakpoint) {
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
}
Thanks for your help!
Making the root element of the navbarbrand have an absolute position seems to give the desired effect. This causes your nav links to be centered without regard to the navbarbrand element. NOTE: If your 'brand' text length gets too long, it will overlap the nav links. https://jsbin.com/juyanijeku/edit?output
.navbar-header {
position: absolute;
}
I've tried something like this
a.navbar-brand {
display: block;
float: none;
text-align: center !important;
}
.nav> li {
display:inline-block !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header text-center">
<a class="navbar-brand" href="#">
Brand
</a>
</div>
<div id="navbar">
<ul class="nav navbar-nav text-center">
<li>Karriere</li>
<li>Über uns</li>
<li>Kontakt</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>

how to make navbar fixed

I have done the code for navbar as follows.
<div class="header-bottom ">
<div class="container">
<nav class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="logo grid">
<div class="grid__item color-3">
<h1><a class="link link--nukun" href="index.html"><i></i><span>PRISM</span></a></h1>
</div>
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse nav-wil" id="bs-example-navbar-collapse-1">
<nav class="menu menu--horatio">
<ul class="nav navbar-nav menu__list">
<li class="menu__item menu__item--current">Home</li>
<li class="menu__item">About</li>
<li class="menu__item">Short Codes</li>
<li class="menu__item">Gallery</li>
<li class="menu__item">Contact</li>
</ul>
</nav>
</div>
</nav>
</div>
</div>
the output of code is This is output for above code
i want to make only navbar as fixed please help to do so.
Are you using Bootstrap? If so, change
<nav class="navbar navbar-default">
to
<nav class="navbar navbar-default navbar-fixed-top">
Here you have an Example.
If not using bootstrap:
.navbar-fixed-top {
position: fixed;
right: 0;
left: 0;
top: 0;
z-index: 1030;
}
Edit:
I missunderstood your question.
You should use affix. And take away the navbar-fixed-top from my previous comment
$('#nav').affix({
offset: {
top: $('header').height()
}
})
where #nav is the nav that you want to get fixed, and .heading is the first nav or heading. So when you scroll the height of the first one, the second one will be fixed.