I'm trying to style a navigation menu and its corresponding content, I'm using bootstrap.
EDIT as per comment (thank you for pointing that out):
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<nav id="navigation" class="navbar navbar-inverse navbar-fixed-top" data-spy="affix">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse"></div>
<div class="navbar-collapse collapse">
<ul id="main-navigation" class="nav navbar-nav">
<li class="item-1">MENU ENTRY 1</li>
</ul>
</div>
</div>
<div id="navigation-content" class="container-fluid">
<div class="navigation-content-subsection" id="item-1">
<div class="something"><p>content for MENU ENTRY 1 goes here.</p></div>
</div>
</div>
</nav>
</body>
</html>
Relevant SCSS is:
$main-background: #e74c3c;
$menu-background: #ecf0f1;
body {
background: $main-background;
}
#navigation-content {
background: $menu-background;
}
As you can see the content of a menu entry is shown (it will be shown upon hover event).
The problem I have is that I want a different color for the content and main navigation, but I can't find a way to hide that bottom black line.
It looks like the navigation-content-subsection div is not taking the full height or in other words it doesn't fully fit its parent div.
How can I make it so that it hides that bottom black line?
navbar-fixed-top is causing it.
.navbar-fixed-top {
border-width: 0px;
}
I found this out by looking though the chrome dev tools (inspect) until I saw which element had a border.
Related
Div above navbar is not in the top of body (Screenshot).
source:
<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
<h1>Bootstrap Affix Example</h1>
<h3>Fixed (sticky) navbar on scroll</h3>
<p>Scroll this page to see how the navbar behaves with data-spy="affix".</p>
<p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels.</p>
</div>
<div class="navbar navbar-inverse" style="background-color:#026;" data-spy="affix" data-offset-top="197">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("ՏԵՍԱԿՆԵՐ", "Index", "Home")</li>
<li>#Html.ActionLink("ՕԳՏԱԿԱՐ ՆՅՈՒԹԵՐ", "About", "Home")</li>
<li>#Html.ActionLink("ԿԼԻՆԻԿԱՆԵՐ", "Contact", "Home")</li>
<li>#Html.ActionLink("ԲԺԻՇԿՆԵՐ", "Contact", "Home")</li>
<li>#Html.ActionLink("ՆՈՐՈՒԹՅՈՒՆՆԵՐ", "Contact", "Home")</li>
<li>#Html.ActionLink("ԲԼՈԳ", "Contact", "Home")</li>
</ul>
</div>
</div>
</div>
.affix {
top: 0;[enter image description here][1]
width: 100%;
z-index: 9999 !important;
}
.affix + .container-fluid {
padding-top: 70px;
}
I even tried using JavaScript but it doesn't help. I suppose Bootstrap doesn't let me to do that.
Have you tried adding position:absolute or position:fixed to the .container-fluid element's css?
(https://developer.mozilla.org/en-US/docs/Web/CSS/position)
I am unable to reacreate your problem. It should work, since it's pretty much the example from w3schools.
It might help if you provided a minimal working example of your code as a stack snippet or on something like bootply or jsfiddle.
I am assuming you want your navbar to be at the bottom of the page, and you would like the background color to fill the whole item page (coded area).
To fix this...
Add a wrapper div (call it .bg or something) directly inside the body tag
Set the .bg class to width of 100 (w-100)
Make sure the navbar is not in your .container class, but still inside the .bg wrapper class
Here below I made a simple bootstrap webpage with a background color, and a navbar at the bottom.
I did not use css for brevity, instead I used bootstrap included classes for background color, margins, etc...
If you want the whole webpage to be one color, set the html tag css to
background-color: #somecolor;
Good Luck!
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class="bg bg-danger">
<div class="container-fluid">
<div class="row w-100">
<h4>Bootstrap Afix Example</h4>
</div>
<div class="row w-100 mt-5">
<button type="button" class="btn-primary">button :)</button>
</div>
</div>
<nav class="navbar navbar-default sticky-top navbar-light mt-3 w-100 bg-secondary">
<ul class="nav mr-auto mt-1 mb-1">
<li class="nav-item">
Home
</li>
<li class="nav-item ml-3">
About
</li>
</ul>
</nav>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
</body>
</html>
Before Start, I have searched for the last few hours, found several replies but none that fixed this issue.
I only have one link, and I have a fixed to top navbar. I want the Link to stay on the same line as the Brand in mobile/smaller screens.
Right now on mobile (Ref image below):
I have tried floating it right to see if that helped, but it didn't.
HTML:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a></div>
<div class="collapse navbar-collapse" id="topFixedNavbar1">
<ul class="nav navbar-nav">
<li class="active">1 Link Only<span class="sr-only">(current)</span></li>
</ul>
</div>
</div>
</nav>
CSS:
.navbar-collapse.collapse {
display: inline-block!important;
}
.navbar-nav>li, .navbar-nav {
float: left !important;
}
You only need to delete collapse navbar-collapse classes and use a custom class. You can name it custom-navbar-nav. Finally, add the CSS showed here. If you definitely want your link on the top, you need to use media queries.
.navbar-header {
display: inline-block;
}
.custom-navbar-nav {
display: inline-block;
float: right;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a></div>
<div class="custom-navbar-nav">
<ul class="nav navbar-nav">
<li class="active">1 Link Only<span class="sr-only">(current)</span></li>
</ul>
</div>
</div>
</nav>
Can somebody explain what is going on here?
I'm using bootstrap 3.3.7.
Why are .container elements invisible?
<!-- Navbar -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<a class="navbar-brand" href="#">Big Brother</a>
</div>
<div class="navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Messages</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>something</li>
</ul>
</div>
</div>
<div class="container">
<h2>Invisible</h2>
</div>
Your <h2> is not invisible, it's hiding behind your navbar.
You're using a navbar that uses fixed positioning. This takes it out of the normal document flow where it doesn't take up space so the elements after it begin to flow as if it wasn't there.
If you add padding-top: 50px; to <body> you will see your <h2>.
If you read through the Bootstrap Navbar Docs you'll notice a callout that says Body padding required.
I have been developing a webpage with bootstrap along with some additional styles. The problem is that the navbar is not collapsing in the mobile view. I think that my multiple css files are overlaping.
Can anyone suggest me the appropriate changes?
Thanks in advance.
My html and css codes are here
Try the below solutions
1.Did you include bootstrap.min.js file in your page.
Add below in your file footer and try.
<script src="js/bootstrap.min.js"></script>
OR
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
2.just try change order of loading css files, load your custom css first and bootstrap last.
3.Inspect Page and check for errors(If any path misses make them correct.)
*Include "JQuery" if you miss this. Because Bootstrap JS Needs JQuery for proper working. Must load above bootstrap js.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
Here is the working code:
<div class="navbar navbar-default navbar-fixed-top" role="navigation" data-0="line-height:100px; height:100px; background-color:rgba(0,0,0,0.3);" data-300="line-height:60px; height:60px; background-color:rgba(0,0,0,1);">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="fa fa-bars color-white"></span>
</button>
<h1><a class="navbar-brand" href="index.html" style="line-height:50px" data-0="margin-top:20px;" data-300="margin-top:5px;">GrocShop
</a></h1>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" data-0="margin-top:20px;" data-300="margin-top:5px;">
<li class="active">Home </li>
<li>Team
</li>
<li>Careers
</li>
</ul>
</div>
<!--/.navbar-collapse -->
</div>
</div>
Here is the JSFiddle demo of your code
(hide the Result span of JSFiddle.net to be able to click on the nav button)
What was fixed:
A style should be defined. navbar-default was added to the div class="navbar ..." that defines the navbar.
The CSS for .navbar-toggle where disabled since they made the button to look like a dot.
I've been playing around with this for a while and thought it's time to seek help.
I have a container and within it there is a link and below the link there is a label and below that is the nav bar.
I tried a few of the settings but haven't been able to get it right.
For a moment I thought I had it.
[EDITED] Here is the code that i've been mucking around:
<div style=" background-color:#f0f0f1; width:inherit;">
<div class="container">
<!--Page Title Section -->
<div class="container">
<div style="float:left;">
<br />
Back to Link
<p class="pagelabelspacer">
<asp:Label ID="PageTitleLabel" CssClass="pageTitle" runat="server">Page Title.</asp:Label>
</p>
</div>
</div><!-- /.container-collapse -->
</div>
<!--End Page Title Section-->
<!--Nav Bar -->
<div class="container">
<nav class="navbar navbar-inverse navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Link 1</li>
<li>Link 1</li>
<li>Link 1</li>
</ul>
</div>
</nav>
</div>
<!--End Nav Bar -->
</div>
[EDITED] My questions:
How do i get the nav bar not to overlap the link and label?
[My answer -> just put it in another container and it works]
On nav-default the height of the nav bar seems exaggerated (i.e. too high). Is there a way to change it (e.g. setting a specific pixel height)?
Is there a way to override the default nav bar color?
I'll continue playing with it to try to get it working.
Any suggestions and advice are greatly appreciated.
thanks!
How do i get the nav bar not to overlap the link and label?
http://getbootstrap.com/components/#navbar-fixed-bottom
Body padding required
The fixed navbar will overlay your other content, unless you add padding to the bottom of the . Try out your own values or use
our snippet below. Tip: By default, the navbar is 50px high.
body { padding-bottom: 70px; }
Make sure to include this after the core Bootstrap CSS.
Is there a way to override the default nav color?
http://getbootstrap.com/customize/#navbar
If you're using SASS or LESS bootstrap, has variables that you can change to manipulate various properties of elements.