The following code will load a background image that is cut off or covered by the ul/li's
This only occurs with bootstrap. I have it on jsfiddle
without bootstrap:https://jsfiddle.net/kng2upm1/
with bootstrap:https://jsfiddle.net/kng2upm1/1/
HTML
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.html"><img src="images/logo.png" alt"Logo"></a>
</div>
<div>
<ul class="nav navbar-nav">
<li> Git Hub
<li> Game Vote Alpha
<li> Minecraft Server
</ul>
</div>
</div>
</nav>
<h1>File Directories</h1>
<ul id="filelist">
<li> TV Shows
<li> Movies
<li> Music
<li> Audio Books
<li> Games
<li> Pen and Paper RPG Scans
</ul>
</body>
CSS
#filelist{
list-style-type: none;
}
html{
background-image: url("image");
background-repeat: no-repeat;
background-size: 500px auto;
background-attatchment: fixed;
background-position: right;
}
Bootstrap adds a background-color: #fff to the body, since you are applying the image to the HTML element, try changing your css to put the image on the body element.
https://jsfiddle.net/Lgd2d99h/
Your bootstrap containers were all messed up. You had the background just in one of the nested elements. You should put your background element into the largest containing parent element for the best effect.
HTML:
<ul class="nav navbar-nav">
<li> Git Hub
<li> Game Vote Alpha
<li> Minecraft Server
</ul>
<h1>File Directories</h1>
<ul id="filelist">
<li> TV Shows
<li> Movies
<li> Music
<li> Audio Books
<li> Games
<li> Pen and Paper RPG Scans
<li> Programing Videos
</ul>
</div>
</body>
CSS:
#filelist{
list-style-type: none;
}
html{
}
.container-fluid{
background-image: url("http://67.media.tumblr.com/9c2cc013377eef3aa10cf4859c38349f/tumblr_nlbiqoxbtv1qlhoglo1_500.png");
background-repeat: no-repeat;
background-size: cover;
background-attatchment: fixed;
background-position: right;
}
This is something Bootstrap is adding to your body tag. You can override it by using:
body{
background-color: initial;
}
Make sure your CSS file is referenced after Bootstrap's.
html {
background-image: url("http://67.media.tumblr.com/9c2cc013377eef3aa10cf4859c38349f/tumblr_nlbiqoxbtv1qlhoglo1_500.png");
background-repeat: no-repeat;
background-size: 500px auto;
background-attachment: fixed;
background-position: right;
}
body {
background-color: initial !important;
/* !important to force Code Snippet to use this value.*/
}
#filelist {
list-style-type: none;
}
<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" />
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">
<img src="images/logo.png" alt="Logo">
</a>
</div>
<div>
<ul class="nav navbar-nav">
<li> Git Hub
<li> Game Vote Alpha
<li> Minecraft Server
</ul>
</div>
</div>
</nav>
<h1>File Directories</h1>
<ul id="filelist">
<li> TV Shows
<li> Movies
<li> Music
<li> Audio Books
<li> Games
<li> Pen and Paper RPG Scans
<li> Programing Videos
</ul>
</body>
Add background to body tag (inline css)
<body background="http://67.media.tumblr.com/9c2cc013377eef3aa10cf4859c38349f/tumblr_nlbiqoxbtv1qlhoglo1_500.png">
Bootstrap might be overriding your background...
Don't style the HTML tag...
....style the body tag.
The HTML tag should never be styled for visual changes.
Merely changing your CSS to apply to the body tag rather than the HTML tag corrects this issue.
Fiddle update
(there are also markup errors in your html)
Related
I am relatively new to Sass so apologies if the answer to this question is straightforward. I am building a navbar component and would like to style the entire navbar (.main-header) when hovering over specific icons (.navbar-links and .navbar-title). So far, I have tried setting the .main-header element to a variable ($h: &) as well as using #at-root to no avail. Any and all suggestions would be much appreciated.
Example of the behavior I am looking for:
.navbar-links:hover
results in
.main-header{
background: red;
}
code:
<nav className='main-header'>
<div className='navbar-title'>
<a href='/blog/home'>
<h2 className='navbar-title-text'>REVIEWS</h2>
</a>
</div>
<ul className='navbar-links'>
<li className='navbar-item'>
<a href='/blog/home'>
<FaHome className='navbar-icon' />
</a>
</li>
<li className='navbar-item'>
<a href='/blog/television'>
<FaTv className='navbar-icon' />
<div className='navbar-text'>TELEVISION</div>
</a>
</li>
</ul>
</nav>
You can use pointer-events: none; at the header and set the children to pointer-events: auto; so you can manage it with hover like this:
.main-header {
pointer-events: none;
}
.main-header:hover {
background-color: red;
}
.navbar-item {
pointer-events: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<nav class='main-header'>
<div className='navbar-title'>
<a href='/blog/home'>
<h2 className='navbar-title-text'>REVIEWS</h2>
</a>
</div>
<ul className='navbar-links'>
<li className='navbar-item'>
<a href='/blog/home'>
<FaHome className='navbar-icon' />
</a>
</li>
<li class='navbar-item'>
<a href='/blog/television'>
<FaTv className='navbar-icon' />
<div className='navbar-text'>TELEVISION</div>
</a>
</li>
</ul>
</nav>
Currently got the following setup by checking out other previously asked questions, although now I'm stuck as it won't span out
you mean you want it to extend to full screen width? if so you need to make its parent element width 100% too for example
body {
width: 100%;
}
it could be another parent like a div.container or whatever..
for 100% width of span
<style type="text/css">
.banner span{
width: 100% !important;
}
</style>
You can add img inside as this.
<div ng-controller="MainCtrl">
<header class="banner">
<div class="banner-wrapper">
<div class="banner-title">
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/8/81/Williams_Companies_logo.svg/1280px-Williams_Companies_logo.svg.png" height="100px" width="100%">
</div>
<nav class="banner-nav">
{{ portal | welcome_navigation }}
</nav>
</div>
<nav class="nav-menu" id="header-tabs">
<ul>
<li class="nav-menu-title">Back to Main Site</li>
<li class="nav-contact">| Questions? Get in touch: <li class="nav-number">12345568693</li>
</ul>
</nav>
</header>
</div>
This actually has nothing to do with the width, as header elements are already supposed to span the whole width. There must be some default margin or padding in your html body. All you need to do is set default margin and padding on body tag to be 0.
(I usually follow setting margin/padding on body to 0 as a general practice)
You can remove your existing css code and replace it with this (I checked, it's working):
body {
padding: 0;
margin: 0;
}
<header class="banner">
<div class="banner-wrapper">
<div class="banner-title">
{{ portal | logo }}
</div>
<nav class="banner-nav">
{{ portal | welcome_navigation }}
</nav>
</div>
<nav class="nav-menu" id="header-tabs">
<ul>
<li class="nav-menu-title">Back to Main Site</li>
<li class="nav-contact">| Questions? Get in touch:
<li class="nav-number">12345568693</li>
</ul>
</nav>
</header>
I'm new to html and css. I'm trying to learn them but I have been having some issues. Basically I've been trying to create the website with the background image that has the navbar along the top (this works when previewing with brackets not yet here).
Can I change the colour of the navbar?
Also, how to have h5 header centred on the left side of the page, with h5 header below it, but as four lines, not as 2 long ones overlaying the image.
If anyone could help out that'd be great.
.navbar-nav>li {
float: none;
}
.navbar-default {
background-color: rgba(255, 255, 255, 0);
border-width: 0px;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
background-color: rgba(150, 155, 155, );
}
.navbar {
margin-bottom: 0 !important;
}
}
.txtpic {
position: absolute;
text-align: center;
background-image: http: //i.imgur.com/pE2NrKh.jpg;
color: white;
}
.list {
font-family: 'Open Sans Condensed', sans-serif;
font-size: 25px;
font-weight: bolder;
}
<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<title>Kyrgystan</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
</script>
<title>Kyrgystan exped</title>
<link href="Calums2.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
</head>
<body>
<img height="100%" src="http://i.imgur.com/pE2NrKh.jpg" style="position: relative; top: 0; left: 0;" width="100%">
<div class="list" style="Position: absolute; top: 0px; left:0px;">
<nav class="navbar navbar-default">
<ul class="nav nav-justified navbar-nav">
<li>Home
</li>
<li>Team
</li>
<li>Krygyzstan
</li>
<li>Blog
</li>
<li>Expeditions
</li>
</ul>
</nav>
<style>
text-align:justify;
</style>
</div>
<div class="txtpic" style="top: 100%;">
<div class="row-sm-3"></div>
<h3>Title is H3</h3>
<h5>Text is h5.. We are a group of old school friends (plus a few others who tag along) who go on expeditions and good trips. We have over a thousand nights under canvas between us, and there are more in the pipeline. We have done trips on foot, by car, on water in the boat we built, by bicycle and even in a wooden burger cart. So far our outings have taken us across Europe, Asia and Africa.</h5>
</div>
</body>
</html>
if you want to change your navbar text color try with
.navbar-default .navbar-nav>li>a {
color: red !important;
}
EDIT:
Let say this is the html markup
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<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>
</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>Home
</li>
<li>Team
</li>
<li>Krygyzstan
</li>
<li>Blog
</li>
<li>Expeditions
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="list">
<div class="txtpic" style="text-align: center">
<h3>Title is H3</h3>
<h5>Text is h5.. We are a group of old school friends (plus a few others who tag along) who go on expeditions and good trips. We have over a thousand nights under canvas between us, and there are more in the pipeline. We have done trips on foot, by car, on water in the boat we built, by bicycle and even in a wooden burger cart. So far our outings have taken us across Europe, Asia and Africa.</h5>
</div>
</div>
1- / youre previous code you was trying to put an image as an background with img element
1-1/ better way to do it with css just
.list {
background: url(http://i.imgur.com/pE2NrKh.jpg);
background-size: cover;
}
also you said that you cant change the color of your navbar text, you need to select the a element with .navbar-nav > li > a
.navbar-nav > li a{
color: white !important
}
For having the contents of h5 as 4 lines instead of the default way they appear try using the <br> tag. This tag breaks the line and starts a new line. So you could write it the following way:
<h5>Text is h5.. We are a group of old school friends (plus a few others who tag along) who go on expeditions and good trips.
<br> We have over a thousand nights under canvas between us, and there are more in the pipeline.
<br> We have done trips on foot, by car, on water in the boat we built, by bicycle and even in a wooden burger cart.
<br> So far our outings have taken us across Europe, Asia and Africa.
</h5>
check out the following link to help you understand this tag better
The reason why this is not on top of the background image is that you have defined absolute positioning in the class 'txtpic'. try changing it to something else and tell me what happens.
Also the navbar background-color seems to change when i try to do so. If you want to change the text color use 'color:' instead of 'background-color'.
I made a footer with this following HTML:
<nav class="navbar navbar-inverse navbar-bottom">
<div class="container">
<p class="navbar-text pull-left">Copyright © OLShop.com 2016</p>
<ul class="nav navbar-nav navbar-right">
<li>About Us</li>
<li>Twitter</li>
<li>Facebook</li>
<li>Instagram</li>
</ul>
</div>
</nav>
Everything worked perfectly when I set it to fixed. But when I set footer to be not fixed, it wasn't located at the bottom of the page (floating) and had border radius. How to set it to the bottom of the page (not fixed) and remove the border-radius?
Any guidance will be very much appreciated.
You need to position the nav at the bottom of the page with CSS positioning. Refer to my earlier post on positioning.
Also you should override the media query from bootstrap to remove border-radius.
I have attached a code snippet but it will not work in this form.
You should copy the HTML code and a create a new external stylesheet using the CSS styles in the snippet and then add it after bootstrap.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="stylesheet.css"/>
footer {
position:absolute;
left:0;
bottom:0;
width:100%;
}
#media (min-width: 768px) {
.navbar {
border-radius: 0;
}
}
.navbar{
margin-bottom:0;
bottom:0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<footer>
<nav class="navbar navbar-inverse navbar-bottom">
<div class="container">
<p class="navbar-text pull-left">Copyright © OLShop.com 2016</p>
<ul class="nav navbar-nav navbar-right">
<li>About Us</li>
<li>Twitter</li>
<li>Facebook</li>
<li>Instagram</li>
</ul>
</div>
</nav>
</footer>
It's simple. Just try this:
<nav>
<div class="container">
<p class="navbar-text">Copyright © OLShop.com 2016</p>
<ul class="text-center inline-me">
<li>About Us</li>
<li>Twitter</li>
<li>Facebook</li>
<li>Instagram</li>
</ul>
</div>
</nav>
in Custom CSS, add this:
ul.inline-me li a {display:inline; padding-right:4px;}
Hope that helps.
How to put it down to the bottom of page (not fixed)?
You can just put it's html in the right place (probably inside a footer tag).
JsFiddle : http://jsfiddle.net/nnndfcad/1/
Or you can use an absolute positioning like #santon's answer explained.
But I highly disapprove this type of approach.
How to remove the border-radius?
According to your code, a simple
.navbar-inverse {
border-radius: 0px;
}
Should solve it.
HTML :
<nav class="header"> <img src="smiley.gif" class="logo">
<ul class="navigation">
<li id="a" class=""><span></span>A
</li>
<li id="b" class=""><span></span>B
</li>
<li id="account" class="right"> <span></span>Test Test
<ul class="dropdown">
<li>Log out
</li>
</ul>
</li>
</ul>
</nav>
From a previous question I was told to use inline-block to get the list to sit on the same line as the image (logo). however when I make the image the full height of the header it still drops the list down. What am I doing wrong?
JSFiddle
Change in .navigation class position from relative to absolute.
.navigation {
position: absolute;
display: inline-block;
z-index: 1000;
}
fiddle