I am new to Web Dev, and i am facing an issue wrt to Div : https://jsfiddle.net/debashis_gt540m/17mmmxps/2/
The three div's at the end have some amount of spacing in between them, I've tried with inserting all 3 div's within a single one, but it didn't help. Anyone ? I want to get rid of the spaces between the 3 div's.
The code is:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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" href="https://in.linkedin.com/in/debdebashis" target="_blank">Debashis Deb</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Home
</li>
<li>About Me
</li>
<li>Skills
</li>
<li>Interests
</li>
<li>Contact Me
</li>
<li>
<a> </a>
</li>
</ul></div>
</div>
</nav>
<div>
<div class="container-fluid bg-1 well">
<div class="row">
</div>
</div>
<div class="container-fluid bg-2 well">
</div>
<div class="container-fluid bg-3 well">
</div>
</div>
.well {
margin-bottom: 0px !important;
}
the 3 divs have bottom margins, that's what adding the space. add this css:
.container-fluid{margin-bottom:0px;}
Related
i'm trying to create a navbar with logo, like this layout: Layout on desktop
and with mobile, like this layout: Layout on mobile
In the first layout, i need that the navbar is center vertically. I have write this snippets of code:
<div class="row">
<div class="col-md-3">
<a href="#" class="pull-left">
<img src="image/logo.png" height="300px" id="logo" class="img-responsive">
</a>
</div>
<div class="col-md-9">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#example-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Search</li>
<li>Archives</li>
<li>Education</li>
<li>About</li>
</ul>
</div>
</nav>
</div>
</div>
That's work, except the vertically centered navbar and the logo on mobile go under the navbar, how i can obtain this two layout? Thanks in advance. :)
Your images do not appear making the question unclear on what you're trying to achieve. From what I understand is that you run out of space on mobile causing the elements to stack. Try adding a resizing attribute to the logo to make it a compatible size for mobile. Please revise your question though.
You can try align="center":
<div align="center" style="max-height:inherit">
<div class="col-md-9">
<nav align="center" class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#example-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Search</li>
<li>Archives</li>
<li>Education</li>
<li>About</li>
</ul>
</div>
</nav>
</div>
And please tell me if it works.
I got banner 750x100 above the navbar. When I minimize window to col-xs, I got two problems -
1) Navbar-brand skip under the line. (Red line)
2) Banner is too small, I want align it to center or enlarge the height. (Blue line)
<div class="container-fluid banner text-center">
<div class="row">
<div class="col-md-12">
<a href="#">
<img class="img-responsive" src="http://placehold.it/750x100" alt="" style="margin: 0 auto;">
</a>
</div>
</div>
</div>
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Some long texthere</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>about</li>
<li>about</li>
<li>about</li>
<li>about</li>
</ul>
</div>
</div>
</nav>
It's possible to arrange place as I wrote, or should I try other way?
<nav class="navbar navbar-findcond navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#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" href="">
<img alt="null">
</a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav navbar-right">
<li class="active">Products
</li>
<li class="active">About
</li>
<li class="active">Testimonials
</li>
<li class="active">Order
</li>
<li class="active">Contact Us
</li>
</ul>
</div>
</div>
</nav>
<section id="products">
<div></div>
</section>
I change my section class="products" to section id="products", and when I click it, nothing happen.
The reason why I used id is because the active navbar is not showing. I'm using findcond navbar bootstrap.
You can use like this
<section id="products" class ="products">
Since I don't know about back-end operations, cannot sure about it. I trust some operations are done by that css class products.
Question Background:
I have a standard Bootstrap collapsible NavBar that is pulled-right.
The Issue:
This is the NavBar on a non-mobile device:
This is pulled right to allow for this desired right-aligned posistion.
This is the NavBar collpased on a mobile device:
**Note that the item in the dropdown are aligned right, this make sense as its pulled right but I want them centered when on a mobile device, whilst keeping them aligned right on a non-mobile device
The Code:
I thought that setting text-center on the <ul> list would solve the issue but it does not:
<div class="navbar">
<nav class="navbar navbar-default navbarColour" role="navigation" id="nav">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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>
<img src="~/Images/DC.png" class="dc">
</div>
<div class="middleNavPadding">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<div class="pull-right text-center">
********Set text-center but this dosen't work********
<ul class="nav navbar-nav text-center">
<li>Services</li>
<li>Our Mission</li>
<li>Projects Gallery</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
</div>
Any help with setting these <ul> list elements centered but keep the menu items pulled right on a non mobile device would be great.
Instead of using pull-right you should use navbar-right.Just put navbar-right to the unordered-list, remove the pull-right div, and the links will be centered on small devices.Working example.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar">
<nav class="navbar navbar-default navbarColour" role="navigation" id="nav">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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>
<img src="~/Images/DC.png" class="dc">
</div>
<div class="middleNavPadding">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right text-center">
<li>Services
</li>
<li>Our Mission
</li>
<li>Projects Gallery
</li>
<li>Contact Us
</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
The page has a vertical sidemenu. It works fine when the page is maximized. When minimized i would like it to show/hide on click on the toggle icon, but nothing happens. The menu just doesnt show in my case.
(But here in the fiddle, it flashes though).
Where am i going wrong.
http://jsfiddle.net/rk74g6w0/
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid navbar-container">
<div class="navbar-header"> <a class="navbar-brand" href="#">DS-Menu</a>
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".sidebar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-lg-2">
<div class="sidebar-collapse collapse col-sm-3 col-md-2
sidebar navbar-default navbar-static-side">
<ul id="menu" class="nav nav-sidebar sidebar-collapse in">
<li class="active mainmenu"><a href="#">Menu 0 <span
class="glyphicon arrow"></span></a>
<ul class="submenu">
<li>item 0.1
</li>
<li>item 0.2
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="col-lg-10"></div>
</div>
</div>
Replace this:
<ul id="menu" class="nav nav-sidebar sidebar-collapse in">
By this:
<ul id="menu" class="nav nav-sidebar">
JSFiddle: http://jsfiddle.net/rk74g6w0/1/