Here I given d-flex and justify-content-between class in the parent tag of a and div . but I cannot understand why its not working here..
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container d-flex justify-content-between">
<a class="navbar-brand" href="#">
<img width="100%" height="50" src="icons/Logo.png">
</a>
<div class="collapse navbar-collapse" id="navbarScroll">
<h1>Right</h2>
</div>
</div>
</nav>
so with your supplied code, you just need to add justify-content: flex-end to the .navbar-collapse section.
To complete your provided code sample, you would just add the bootstrap class justify-content-end to the right hand second, shown below
<div class="container d-flex justify-content-between">
<a class="navbar-brand" href="#">
<img width="100%" height="50" src="icons/Logo.png">
</a>
<div class="collapse navbar-collapse justify-content-end" id="navbarScroll">
<h1>Right</h1>
</div>
</div>
Shown in this codepen
Related
I have a website with a horizontal navbar, works fine. At the appropriate breakpoints it collapses and you open it via the hamburger button.
Underneath I have a bootstrap row:
<div class="row">
<div class="col-xl-2 px-0">
<div class="container-fluid">
<div class="container show-not-on-mobile text-center pt-5"> <h5>Paintings</h5></div>
<nav class="navbar navbar-expand-xl navbar-light navbar-custom">
<div class="container mb-0 px-0 show-not-on-desktop">
<a class="navbar-brand" href="/paintings">Paintings</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mnav" aria-controls="mnav" aria-expanded="false" aria-label="Toggle navigation">
<span class="fancy-toggler navbar-toggler-icon"></span>
</button>
</div>
<div class="container mb-0 px-0">
<div class="collapse navbar-collapse" id="malereinav">
<ul class="navbar-nav mr-auto mx-auto flex-column">
<li class="nav-item">
<a class="nav-link active rounded" title="Movement" href="/paintings-movement">
Movement
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<div class="col-xl-10">
Gallery Content shown with #Columns
</div>
</div>
Everything works fine, except this breakpoint:
#media screen and (min-width:992px) and (max-width: 1280.98px){
#columns[data-columns]::before {
content: '3 .col-lg-4';
}
}
At this breakpoint nothing happens with this navbar:
neither the navbar is displayed horizontally nor vertically.
Also no mobile version with hamburger is displayed.
No matter if I use navbar-expand-xl or navbar-expand-lg or navbar-expand-md ...
Maybe someone has an idea, I would be very happy.
I am new with R, and I am trying to get a custom layout. I have my CSS.
Below is my code:
ui <- fluidPage(
theme="www/style.css" ,
suppressDependencies("bootstrap"),
tags$head(includeCSS("www/styles.css")),
HTML('<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
<div id="wrapper-top">
<ul class="navbar-nav ml-auto">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<li class="nav-item active mr-3">
<a class="nav-link acces" href="/">Link</a>
</li>
</div>
</ul>
</div>
</nav>'),
tags$footer( HTML("<footer class='sticky-footer' role='footer'>
<div class='container my-auto'>
<div class='copyright text-center my-auto'>
<span>©
2021
<a aria-label='' href=''>My footer</a>
</span>
</div>
</div>
</footer>")),
This gives me an output like this:
What I trying to achieve is to get the navigation below body tag currently it's all wrapped with this container-fluid class. And also I am trying to get the footer at the bottom of the page
Example:
Is there anyone that can help me with this? Thank you all
I'd like to achieve the following result:
Requirements:
Image should be responsive
Fixed-top navbar has to stay
No vertical scrolling
Footer has to stay, too (preferably on the bottom)
I spent the whole day trying to figure out it without results.
I tried this approach:
https://codepen.io/Codewife_101/pen/rpvdPq
but 'align-self-center' caused the vertical scrolling in my website.
It doesn't look good, in particular on mobile devices.
I VERSION:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Red Logo Website</title>
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/custom.css">
<!--Material Design Icons-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<!--adding Roboto different styles-->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-light bg-light fixed-top">
<div class="container">
<img src="img/navbar_red_logo.32x32.png" class="img-fluid" alt="red-logo">
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav2"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarNav2">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link font-weight-bold" href="">Brand Name</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- 1. JUMBOTRON -->
<section id="showcase">
<div class="container h-100">
<div class="row h-100 justify-content-center align-self-center">
<img src="img/red_logo.svg" class="img-fluid" alt="Red logo">
</div>
</div>
</section>
<!--FOOTER-->
<footer id="main-footer" class="text-center">
<div class="container">
<div class="row">
<div class="col">
<p class="text-muted">Copyright © 2017 <img src="img/navbar_red_logo.32x32.png" class="img-fluid" alt="red-logo"> RedDesign LLC</p>
</div>
</div>
</footer>
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
I also tried this approach:
https://codepen.io/Codewife_101/pen/eyVxre
II VERSION:
<nav class="navbar navbar-expand-sm navbar-light bg-light fixed-top">
<div class="container">
<img src="img/navbar_red_logo.32x32.png" class="img-fluid" alt="red-logo">
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav2"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarNav2">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link font-weight-bold" href="">Brand Name</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- 1. JUMBOTRON -->
<section id="showcase">
<div class="container h-100">
<div class="row h-100 justify-content-center align-items-center">
<img src="https://s3-us-west-1.amazonaws.com/all-images-public/red_logo.svg" class="img-fluid" alt="Red logo">
</div>
</div>
</section>
<!--FOOTER-->
<footer id="main-footer" class="text-center">
<div class="container">
<div class="row">
<div class="col">
<p class="text-muted">Copyright © 2018 <img src="img/navbar_red_logo.32x32.png" class="img-fluid" alt="red-logo"> RedDesign LLC</p>
</div>
</div>
</footer>
It doesn't center vertically. I'm open to any suggestions/solutions.
Anyone? I would be very grateful for any tips.
At first glance, my question looks like a duplicate, but when you look deeper, you'll see my situation varies. Besides, my reputation is too low to write comments on somebody else's question.
use CSS
css property position:fixed then
your header
div id = "NAVBAR"
and your footer too
div id = "FOOTER"
In your css:
#NAVBAR{
bottom:0
}
#FOOTER{
top:0
}
you must set the height off the body accoding to you screen resolution for you to not have an scrolling effect.
Please try this, it revolves around dynamic height thanks to calc and vh(viewport height)
nav, footer{
max-height: 50px;
}
body,html, section{
height: 100%;
}
section{
display: flex !important;
justify-content: center;
align-items: center;
}
section img{
object-fit: contain;
height: calc(100vh - 150px) !important;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<nav class="navbar navbar-default navbar-fixed-top">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="navbar-nav nav">
<li class="nav-item">Link</li>
<li class="nav-item">Link</li>
<li class="nav-item">Link</li>
</ul>
</nav>
<section>
<img src="http://www.tandemconstruction.com/sites/default/files/styles/project_slider_main/public/images/project-images/IMG-Residence-1_0.jpg" alt="" class="img-fluid">
</section>
<footer class="navbar navbar-default navbar-fixed-bottom text-center">
<p class="text-muted navbar-brand">Copyright © 2018 RedDesign LLC</p>
</footer>
I fixed your code. Below is the working version.
The problem was a simple beginner mistake: You had the image in a row but not in a column. Bootstrap rows and columns are designed to work together. So, whenever you create a .row you must create at least one .col inside that row. That usually fixes all of the problems.
Here's the working version of your code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<nav class="navbar navbar-expand-sm navbar-light bg-light fixed-top">
<div class="container">
<img src="img/navbar_red_logo.32x32.png" class="img-fluid" alt="red-logo">
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav2"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarNav2">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link font-weight-bold" href="">Brand Name</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- 1. JUMBOTRON -->
<section id="showcase">
<div class="container" style="height: 100vh;">
<div class="row h-100">
<div class="col align-self-center">
<img src="https://picsum.photos/440/" class="img-fluid mx-auto d-block">
</div>
</div>
</div>
</section>
<!--FOOTER-->
<footer id="main-footer" class="text-center fixed-bottom">
<div class="container">
<div class="row">
<div class="col">
<p class="text-muted">Copyright © 2018 <img src="img/navbar_red_logo.32x32.png" class="img-fluid" alt="logo"> RedDesign LLC</p>
</div>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
I am using Bootstrap Beta 4 and I found that nav overlaps my column div, what I might have done wrong here?
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
<a class="navbar-brand" href="#">Nav Link</a>
<div id=navbar class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href=#>Dashboard</a>
</li>
</ul>
</div>
</nav>
<div class="row">
<div class="col border">
Left panel
</div>
<div class="col border">
Right panel
</div>
</div>
</div>
</body>
</html>
if you remove the class fixed-top from your nav element it will stop the overlap.
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-light bg-light"><!--Removed fixed-top-->
<a class="navbar-brand" href="#">Nav Link</a>
<div id=navbar class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href=#>Dashboard</a>
</li>
</ul>
</div>
</nav>
<div class="row">
<div class="col border">
Left panel
</div>
<div class="col border">
Right panel
</div>
</div>
</div>
</body>
</html>
Alternatively you could add some css to override the positioning of the nav element. (This way you don't have to remove the fixed-top class from your nav)
<style>
.fixed-top{
position:relative
}
</style>
Hope this helps :-)
I'm trying to make a Bootstrap navbar that contains icons on the right and left with a centered title. I'm not able to get the text to center properly.
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar navbar-fixed-top">
<div class="navbar-header pull-left">
<i class="fa fa-bars fa-lg" aria-hidden="true"></i>
</div>
<!-- Center the contents of this element in the navbar -->
<div class="navbar-header nav-element-center">
<span class="h4 ">Centered Title</span>
</div>
<div class="navbar-header pull-right">
<i class="fa fa-user-plus" aria-hidden="true"></i>
</div>
</div>
</div>
</nav>
test example: https://jsfiddle.net/goyosoyo/aw0219a4/
Note: I've given the divs a colorized border so that I could see what was happening.
What am I missing?
You can do it like this:
HTML:
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar navbar-fixed-top">
<div class="navbar-header pull-left">
<i class="fa fa-bars fa-lg" aria-hidden="true"></i>
</div>
<div class="navbar-header pull-right">
<i class="fa fa-user-plus" aria-hidden="true"></i>
</div>
<!-- Center the contents of this element in the navbar -->
<div class="nav-element-center">
<span class="h4 ">Centered Title</span>
</div>
</div>
</div>
</nav>
CSS:
.nav-element-center {
text-align: center;
margin-top: 14px;
}
JSFIDDLE