Im in the process of learning bootstrap and developing my first website by im having a really annoying issue trying to get a background color or image display behind my transparent navigation.
This is my html code so far
<body>
<header>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#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 class="navbar-brand" href="#featured"><img id="main-logo" src="img/logo.svg"/></a>
</div><!-- end of navbar-header -->
<div class="collapse navbar-collapse" id="collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div><!-- end of collapse navbar-collapse -->
</div><!-- end of container -->
</nav><!-- end of navigation -->
</header>
<div class="top-section">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="name">
<img id="name-text" src="img/text.svg"/>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
This is my current css stylesheet
body {
position: relative;
}
/*--Navigation--*/
.navbar-default {
background-color: transparent;
border: none;
}
.nav li a {
margin-top: 30px;
}
#main-logo {
float: left;
}
/*--Top Section--*/
.top-section {
background-color: #7ecaeb;
margin-top: 80px;
position: relative;
background-position: center;
background-size: cover;
}
.name {
text-align: center;
float: none;
}
#name-text {
width: 300px;
height: auto;
}
What i really want to try and do is just have the background on the class .top-section (either color or picture depending on what i go for) go behind the nav.
Im sure im just being a bit stupid here but i cant for the life of me see what im doing wrong, im still learning this so its quite new to me.
Thanks everyone
Related
My Top NavBar using bootstrap it's fine on desktop but when I browser my website using my Mobile the navbar links appear stacked vertically, instead of horizontal, why is this happening? any clue?
I am using bootstrap, here is my code:
#import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';
body {
background: black url(Images/image.png) no-repeat center center;
height: 100vh;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
}
.navBarLinks {
color: white;
}
.navBarLinks:hover {
color: black;
}
.body-content {} .dl-horizontal dt {
white-space: normal;
}
input,
select,
textarea {
max-width: 280px;
}
<ul class="nav nav-justified navbar-inverse">
<li><a class="navBarLinks">Stuff1</a>
</li>
<li><a class="navBarLinks">Stuff2</a>
</li>
<li><a class="navBarLinks">Stuff3</a>
</li>
<li><a class="navBarLinks">Stuff4</a>
</li>
<li><a class="navBarLinks">Stuff5</a>
</li>
</ul>
//more stuff not relevant
Thank you in advance!
<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.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- 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" 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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a class="navBarLinks">Stuff1</a></li>
<li><a class="navBarLinks">Stuff2</a></li>
<li><a class="navBarLinks">Stuff3</a></li>
<li><a class="navBarLinks">Stuff4</a></li>
<li><a class="navBarLinks">Stuff5</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
This is a basic example of what I was talking about...using bootstrap example.
https://getbootstrap.com/examples/navbar/
When you "Run code snippet" open it up using the full page button and then shrink browser to get a better idea.
Problem: space between .nav and .jumbotron in bootstrap.
what did I do: override the bootstrap.css , override .jumbotron{margin-bottom:0px}, it's not working.
What I've found: it works well when I debug it in the original file.
couldn't work in override css file
work well in original file
HTML:
<body>
<div class="header">
<div class="top-header">
<div class="jumbotron">
<img src="image/name.png" alt="">
<h2>Curiosity Creative</h2>
</div><!--Jumbotron-->
</div><!--top-header-->
<nav class="navbar navbar-default">
<div class="container">
<!-- 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="#displayItem" 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>
</div><!--navbar-header-->
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="displayItem">
<ul class="nav nav-tabs">
<li class="home active">
<i></i> Home</li>
<li class="me">
<i></i>AboutMe</li>
<li class="blog">
<i></i>Blog</li>
<li class="contact">
<i></i>Contact</li>
</ul>
</div> <!-- collapse navbar-collapse-->
</div><!--container -->
</nav><!--nav-->
</div>
CSS:
*{
margin: 0;
padding: 0;
}
body{
background: url("../image/body_bg.jpg");
overflow: scroll;
}
div{
position:relative;
}
.top-header{
background-color: white;
}
.jumbotron {
background-color:transparent !important;
text-align: center;
margin-bottom:0px;
}
.jumbotron img{
width: 400px;
}
.jumbotron h2{
color: #aaa;
font-size: 13px;
font-family: verdana;
}
It looks to me like maybe you've included your "index.css" before the "bootstrap.css". If that is correct, swap them around so that your "index.css" is loaded last, not first.
eg;
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/index.css" rel="stylesheet">
I'm using the Boostrap's navbar, inside which there is an image brand (responsive) and some text (menu items). I would like to center the text within the div, but I don't know how: if I center the text in the CSS, there is more space between the left corner of the monitor and the "Home" and and less space between the last "Link" in the right and the right corner in the monitor. It's as if my code takes the div size, subtracts the image size and center the text in the remaining space.
I thought about putting a negative left margin, but because the image is responsive I don't know what value to give.
Can you help me?
http://jsfiddle.net/a001dxn6/2/
HTML
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- 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" 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="#"><img src="official_logo.png" /></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home <span class="sr-only">(current)</span></li>
<li class="dropdown">
Specialità <span class="caret"></span>
<ul class="dropdown-menu">
<li>
</li>
<li>La pizza napoletana</li>
<li>Le specialità della casa</li>
</ul>
</li>
<li>Menu</li>
<li>Eventi</li>
<li>Gallery</li>
<li>Contatti</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
CSS
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar-default {
background-color: transparent;
border-color: darkorange;
text-align: center;
}
.navbar-brand > img {
max-height: 100%;
max-width: 100%;
}
[fixed] Just add CSS: .navbar-brand { position: fixed; left: 1vw; }
can't really test with the fiddle, since there's no image.
have you tried removing text-aling: center from .navbar classes
and adding:
.dropdown, .dropdown-menu{
text-align: center;
}
? let me know if it works.
I'm attempting to preserve the position of two menu element (Home icon and Foo) that render as desired on large devices:
But are displayed as rows on a mobile device (obscuring content):
Is there a way to force these two menu items to display to the right of the Brand menu and on the same 'row'?
Sample: http://www.bootply.com/Fjq7ZXSDXc#
You can create a separate div inside the navbar-header: See example Snippet.
.navbar-header .nav-icons {
padding-top: 12px;
position: absolute;
display: inline-block;
top: 0;
}
.navbar-header .nav-icons span {
padding-left: 5px;
padding-right: 5px;
font-size: 20px
}
.navbar-header .nav-icons a {
color: #fff;
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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" />
<nav class="navbar navbar-inverse navbar-static-top custom-navbar" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#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> <a class="navbar-brand" rel="home" href="#" title="Help"> Brand</a>
<div class="nav-icons">
<a href="#"> <span class="glyphicon glyphicon-home"></span>
</a>
<a href="#"> <span> Foo</span>
</a>
</div>
</div>
<div class="navbar-collapse collapse" id="navbar-collapse-1">
<!-- Non-collapsing right-side icons -->
<ul class="nav navbar-nav navbar-right">
<li class="active">Home
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="text-center">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.
<br>All you get is this text and a mostly barebones HTML document.</p>
</div>
</div>
<!-- /.container -->
Try to add this in your .css
.nav-collapse .nav > li {
display: inline-block;
}
I want to locate the navbar to the right of the screen. It seemed trivial before I tried to do that.
Here is what I did:
index.html
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Start Bootstrap</a>
<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>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
and in bootstrap.css I floated the navbar-brand to right:
.navbar-brand {
float: right;
height: 50px;
padding: 15px 15px;
font-size: 18px;
line-height: 20px;
}
But it is still on the left! How to fix this?
Try this, its actually the .navbar-header that is floated left by default, so adding a float to .navbar-brand will not actually change anything.
.navbar-header {
float: right;
}
JsFiddle
Or adding the .navbar-right class to the .navbar-header would also work.
<div class="navbar-header navbar-right">