I am having a little trouble with the code of my website https://bjmrq.github.io/foyer.html everything is fine on laptop but as soon as I go check it with my mobile the navbar seem to be too long ! If anyone could help me :) (i am using bootstrap 4)
Thanks for your time!
<nav id="mainNavbar" class="navbar navbar-dark navbar-expand-sm fixed-top" style="background-color: #563d7c;">
<a class="navbar-brand navTitle mx-2" href="index.html"><span class="fas fa-camera-retro"></span> Sophie Madonna</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navLinks" aria-label="Toggle navigation">
<span class="navbar-toggle``r-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navLinks">
<ul class="navbar-nav">
<li class="nav-item mx-2">
<a class="navbar navTitle nav-link" href="foyer.html"><span class="fab fa-gripfire"></span> Le foyer</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item mx-2">
My Story
</li>
<li class="nav-item mx-2">
Follow Me
</li>
</ul>
</div>
.navbar {
font-family: 'Ranga';
color: white;
font-size: 1.3em;
}
.navbar-light .navbar-brand .navbar-nav .nav-link .navTitle .navbar .navbar-dark {
font-family: 'Ranga';
color: white;
font-size: 1.3em;
}
here is my problem
The <hr> element just under the first <h1> tag has a set width width: 500px; which is causing the rest of the body to be pushed left on smaller screens.
use class img-fluid for images
<div class="col-md-5 col-lg-5 col-12 col-sm-12">
<div class="heading-text">
<img src="/images/1/undraw_uploading_go67.svg" class="img-fluid" alt="">
</div>
</div>
Related
Ok so figured out the first problem.... now my navbar brand isn't expanding. It seems to be stuck at one size and its added a scroll bar to accommodate. How to I get the whole navbar to move over for the brand?
.navbar {
position: relative;
display:inline-block;
overflow: auto;
background: #f4f4f4;
opacity: .6;
width: 100%;
padding: 5px 8px;
z-index: 9999;}
.navbar-brand {
color:black;
font-weight: bold;
font-size: 300%;}
.navbar a {
float: left;
display: block;
text-align: center;
overflow: auto;
padding: 5px 8px;}
.navbar a:hover{
background-color:#ede2d4;}
<nav class="navbar navbar-expand-lg navbar-light fixed-top justify-content-between">
<div class="container-fluid">
<a class="navbar-brand" href="#">Hello</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a></li>
<li class="nav-item">
<a class="nav-link" href="facts.html">Facts</a></li>
<li class="nav-item">
<a class="nav-link" href="chart.html">Chart</a></li>
<li class="nav-item">
<a class="nav-link" href="video.html">Video</a></li>
<li class="nav-item">
<a class="nav-link" href="jokes.html">Jokes</a></li>
</ul>
<div>
<form class="navbar-form navbar-left form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>
</div>
</nav>
<h1>Testing Page </h1>
It could easily be because you have fixed-top on the first line of your <nav>. That is absolutely fine but the very next item beneath the Nav ... Which is your <h1>... That might now need margin-top the same height in pixels as the navbar (even a few more pixels wouldn't hurt).
Do you see what's happening? fixed-top is letting the content flood underneath the navbar, adding margin to the top of <h1> will bring it all back down the page a little.
<h1 style="margin-top:50px">Testing Page</h1>
Alternatively add margin-bottom to the Navbar.
There also seems to be a stray </header> closing tag immediately after the Nav
I have written code using bootstrap. But my issue is in the Toggle bar , like when I shrink the size to see my Web page responsive or not then the toggle bar is not open.
It shows the three button but when i click then it is not expanding.
Please give me suggestions to get rid of this issue.
Thanks.
Html code
<section>
<div id="container1">
<nav class="navbar navbar-expand-lg navbar-light bg-dark">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="scroll nav-link" href="#home" style = "color: #ffff;">HOME</a>
</li>
<li class="nav-item">
<a class="scroll nav-link" href="#about" style = "color: #ffff;">ABOUT</a>
</li>
<li class="nav-item">
<a class="scroll nav-link" href="#services"style = "color: #ffff;">SERVICES</a>
</li>
<li class="nav-item">
<a class="scroll nav-link" href="#contacts" style = "color: #ffff;">CONTACTS</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</section>
**Css code**
#container1{
margin-top:5rem ;
display: inline-block;
width: 100%;
}
#container1 ul li {
margin-left: 8rem;
margin-right: -5rem;
border-right: 0.0625rem solid grey;
}
#container1 ul li a:hover{
background-color: #5e9ee7;
}
I just get rid of my issue that I have arose a few hours ago. I finally got a fix of my problem. It only happens by removing "bs" which is present in between (data-bs-toggle="collapse") and in (data-bs-target="#navbarNav") in the html code.
.container-fluid-1 {
padding: 0;
}
.navbar {
padding: 0 5%;
}
.navbar-section{
background-color: #fff;
width: 100%;
padding: 0 1%;
margin: 0;
position: fixed;
z-index: 1;
}
.nav-item {
padding: 0 20px;
}
.nav-link {
color: black;
}
.nav-link:focus {
color: black;
}
.nav-link:hover {
color: #feb633;
}
.navbar-brand {
font-size: 3.5rem;
font-family: 'Hind Siliguri', sans-serif;
color: #feb633;
}
.navbar-brand:hover {
color: grey;
}
/* title */
.introduction {
background-color: #fbfbfb;
padding-top: 10%;
}
.subtitle {
font-size: 1.5rem;
color: grey;
}
.twotitle {
padding-top: 220px;
padding-left: 200px;
}
.btn {
background: #feb633;
color: #fff;
}
.btn:hover {
border: 2px solid #feb633;
transition: 0.2s ease-in all;
color: #feb633;
background-color: #fbfbfb;
}
I put a container-fluid class in my whole body but it doesn't provides a full width container except for navbar.
Everything looks fine on PC (1440px) but on mobile the whole body (except for navbar)moving to left side.
Here is the screenshot on laptop that's what I want.
Here is the screenshot on iPhoneX The grey background is on the left now.
Could someone please help me with it? Thanks in advance.
*container-fluid-1 is a class for CSS.
<body>
<!--navbar -->
<div class="container-fluid-1 container-fluid">
<section id="title">
<div class="navbar-section">
<nav class="navbar navbar-expand-lg">
<a class=" navbar-brand" href="#">M</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon">
<i class="fas fa-bars"></i>
</span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#title">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#about-me">About me</a></li>
<li class="nav-item"><a class="nav-link" href="#services">Service</a></li>
<li class="nav-item"><a class="nav-link" href="#mini-shop">Mini Shop</a></li>
<li class="nav-item"> <a class="nav-link" href="#contact-me">Contact</a></li>
<li class="nav-item"><a class="nav-link" href="#">Log in</a></li>
</ul>
</div>
</nav>
</div>
<!--title -->
<div class="introduction row">
<div class="twotitle col-lg-6">
<h1>I'm Marcus</h1>
<p class="subtitle">Web Design& Front End Developer</p>
<br>
Hire me
</div>
<div class="profile col-lg-6">
<img src="images/fa0b3895-7e4e-4ac9-a977-1a99fdefc4dd.png" alt="profile">
</div>
</div>
</section>
</div>
</body>
<body>
<!--navbar -->
<div class="container-fluid-1 container-fluid">
<section id="title">
<div class="navbar-section">
<nav class="navbar navbar-expand-lg">
<a class=" navbar-brand" href="#">M</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon">
<i class="fas fa-bars"></i>
</span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#title">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#about-me">About me</a></li>
<li class="nav-item"><a class="nav-link" href="#services">Service</a></li>
<li class="nav-item"><a class="nav-link" href="#mini-shop">Mini Shop</a></li>
<li class="nav-item"> <a class="nav-link" href="#contact-me">Contact</a></li>
<li class="nav-item"><a class="nav-link" href="#">Log in</a></li>
</ul>
</div>
</nav>
</div>
<!--title -->
<div class="introduction row">
<!--use mobile responsive classes here for full width use col-xs-12 col-sm-12 col-md-12 -->
<div class="twotitle col-lg-6 col-md-12 col-sm-12 col-xs-12">
<h1>I'm Marcus</h1>
<p class="subtitle">Web Design& Front End Developer</p>
<br>
Hire me
</div>
<div class="profile col-lg-6 col-md-12 col-sm-12 col-xs-12">
<img src="images/fa0b3895-7e4e-4ac9-a977-1a99fdefc4dd.png" alt="profile">
</div>
</div>
</section>
</div>
</body>
<!-- begin snippet: js hide: false console: true babel: false -->
I have a Bootstrap 4 website with a navbar. The navbar has a brand part with an image and title text, and then there's the rest of the navbar. You can see it here: https://jsfiddle.net/zmbq/aq9Laaew/218793/
Now, I want to add a subtitle, under the title "A Digital Onomasticon". The problem is - the substitle is long, and I want it to extend below the nav links.
I tried everything I could think of and couldn't figure out how to do that.
NOTE: the answer to this question is not sufficient, as it yields something like this: https://jsfiddle.net/zmbq/7et2uz0w/
Wrap the brand and links in a separate flexbox (d-flex) div...
<nav class="navbar navbar-light bg-light navbar-expand-sm flex-nowrap align-items-start">
<a class="navbar-brand" href="#">
<img src="http://onomasticon.researchsoftwarehosting.org/assets/images/seal-impression.png">
</a>
<div class="d-flex flex-column">
<div class="d-sm-flex d-block flex-nowrap">
<a class="navbar-brand" href="#">A Digital Onomasticon</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarOnavbarNavptions" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Item one</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item two</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item three</a>
</li>
</ul>
</div>
</div>
<small>A lot more text that goes under the links and should be cleverly placed, and isn't</small>
</div>
</nav>
https://www.codeply.com/go/9SK8ItOyzw
Related: Bootstrap 4 navbar with 2 rows
You can set the subtitle to position absolute to remove it from the normal content flow. It's unclear how it should look on mobile, I simply hide it in the media query. Example:
<a class="navbar-brand" href="#">
<img src="http://onomasticon.researchsoftwarehosting.org/assets/images/seal-impression.png">
A Digital Onomasticon
<small>A lot more text that goes under the links and should be cleverly placed, and isn't</small>
</a>
.navbar-brand small {
display: block;
font-size: 10px;
white-space: normal;
position: absolute;
}
#media (max-width: 575.98px) {
.navbar-brand small {
display: none;
}
}
JsFiddle
I am trying to develop a website using twitter bootstrap. I use a image as logo in navbar using this code
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img class="img-responsive" src="images/bradley.png" alt="" /></a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="home current-page">Swap</li>
<li class="episodes">Tales</li>
<li class="about">About</li>
<li class="contact">Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
It is ok for laptop. But for mobile device and tab i want that logo will be center. Please tell me How can i do that? This is my site https://dl.dropboxusercontent.com/u/168659703/project/index.html
.navbar-header {
margin: 0 auto;
display: table;
/* margin-right: 50px; */ remove this or add margin-right: auto !important;
}
http://jsfiddle.net/L64Pa/
Here's an update for Bootstrap 4 since the original accepted answer is now a broken fiddle.
The flexbox utils that are now included in Bootstrap 4 can be used to responsively change the alignment of content. For example, here the brand is centered on mobile:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="d-flex flex-grow-1">
<span class="w-100 d-lg-none d-block"><!-- hidden spacer to center brand on mobile --></span>
<a class="navbar-brand mx-0" href="#">
Brand
</a>
<div class="w-100 text-right">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
<div class="collapse navbar-collapse flex-grow-1 text-right" id="myNavbar">
<ul class="navbar-nav ml-auto flex-nowrap">
<li class="nav-item">
Link
</li>
<li class="nav-item">
Link
</li>
<li class="nav-item">
Link
</li>
<li class="nav-item">
Link
</li>
</ul>
</div>
</nav>
Demo: https://codeply.com/go/DPyf5WFg99
.navbar-header
{
display:block;
text-align:center;
}
You could do a semi "hack" style CSS in your main.css file with:
#media only screen and (max-device-width: 480px) {
.navbar-brand {
float:none !important;
}
.img-responsive {
margin:0 auto !important;
display:block !important;
}
}