I'm having a problem with the brand logo image. Even though it looks good on my computer, I use a background-color to check the hover and it seems to be quite off position. Check this out please. By the way, I'm new to web design, so you may see lots of mistakes in my code, hehe.
pd: I uploaded the image to Imgur but I use it directly from a folder.
.navbar-default {
background-color: #4bd434;
border-color: #209c44;
}
.navbar li a:hover:not(.active) {
background-color: #209c44;
}
.navbar-default .navbar-brand {
color: #ffffff;
}
.navbar-default .navbar-nav > li > a {
color: #ffffff;
font-weight: bold;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: black;
}
body {
background-image: url("Imagenes/1.jpg");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.jumbotron {
margin-top: 100px;
}
.jumbotron h1{
text-align:center;
}
.map-responsive{
overflow:hidden;
padding-bottom:40%;
position:relative;
height:0;
}
.map-responsive iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}
#brand-image {
height: 110px;
width: 110px;
padding-bottom: 40px;
margin-top: -24px;
}
#brand-image:hover {
background-color: red;
}
<!DOCTYPE html>
<html lang="es">
<head>
<title>Central de Reparaciones</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<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>
<link rel="stylesheet" type="text/css" href=".\sheet.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<a class="navbar-brand" a href="./index.html">
<img class="img-responsive" id="brand-image" alt="Website Logo" src="http://s14.postimg.org/rqjmwt8r5/logo.png"/>
</a>
<ul class="nav navbar-nav">
<li>Heladeras</li>
<li>Lavarropas</li>
<li>Secarropas</li>
<li>Microondas</li>
<li>Televisores</li>
<li>Lavavajillas</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-earphone"></span> (0223) 482-5446</li>
<li><span class="glyphicon glyphicon-map-marker"></span> Dónde estamos</li>
</ul>
</div>
</nav>
<div class="container">
<div class="jumbotron well">
<div class="page-header">
<h1>Central de Reparaciones</h1>
</div>
<p>Somos service oficial de Whirpool blablablablal</p>
<p>ASDSDASDSDASDDSDASDSDASDDSDDDASDASD</p>
</div>
</div>
</body>
<script src=".\script.js"></script>
</html>
It seems that is way off because of padding-bottom: 40px; in #brand-image. Removing it should resolve problem. If you like to keep same pixel ratio, use margin-bottom instead of padding-bottom.
Your CSS should look like:
#brand-image {
height: 110px;
width: 110px;
margin-bottom: 40px;
margin-top: -24px;
}
Related
I've been trying to put an image as a background in the HTML element for the past few hours, however, the background somehow won't show up after I put in the navbar, I assume it has something to do with the navbar background taking priority but honestly I have no idea.
HTML, CSS
#charset: "utf-8";
html {
background-image: url(../design/background.png);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: right;
}
li a {
display: block;
color: #fff;
text-align: center;
padding: 27px 60px;
text-decoration: none;
font-family: 'Abel', sans-serif;
}
li a:hover {
background-color: #7446ad;
}
#logo {
float: left;
width: 100px;
height: 60px;
padding: 5px 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Abel&display=swap" rel="stylesheet">
</head>
<body>
<nav>
<div>
<ul>
<li>SUPPORT</li>
<li>STORE</li>
<li>TEAMS</li>
<a class="navbar-brand">
<img src="asd2.png" id="logo">
</a>
</ul>
</div>
</nav>
</body>
</html>
The background image won't show up as the background for some reason, even if i change the html selector to body selector.
.
It seems you moved your css into it's own file styles.css but forgot to get rid of the enclosing html <style> tags.
Remove them and in theory i'm confident the image will load.
Also change
#charset: "utf-8";
to
#charset "utf-8";
but this is not relevant to the question.
I tried replacing the image you provided, its working. It doesnt look like css issue, but rather with image path you provided in css.
html{
background-image: url(https://placeimg.com/640/480/animals);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li{
float:right;
}
li a{
display: block;
color: #fff;
text-align: center;
padding: 27px 60px;
text-decoration: none;
font-family: 'Abel', sans-serif;
}
li a:hover{
background-color: #7446ad;
}
#logo{
float:left;
width: 100px;
height: 60px;
padding: 5px 5px;
}
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Abel&display=swap" rel="stylesheet">
</head>
<body>
<nav >
<div>
<ul>
<li>SUPPORT</li>
<li>STORE</li>
<li>TEAMS</li>
<a class="navbar-brand">
<img src="asd2.png" id="logo">
</a>
</ul>
</div>
</nav>
<div>
</div>
</body>
</html>
I am relatively new to bootstrap and html/css and so far I have been getting along pretty well. What I have been trying to do is increasing the height of the navbar to 80px. My problem is that now I cannot get the content of my navbar centered, they are just too high up.
It looks like this: https://gyazo.com/4ba22961033e9bafa13aac44a50de3f6
Thanks :)
Here is my whole CSS code:
* {
box-sizing: border-box;
}
body {
background-color:#f6f6f6;
background-image: url("img/bg.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
background-size:cover;
overflow-x:hidden;
overflow-y:scroll;
margin:0;
padding:0!important;
}
.navbar {
position: relative;
border:1px solid transparent;
min-height: 80px;
border-top: 0;
border-bottom:1px solid #e7e7e7;
margin-bottom:0;
z-index: 100;
}
.navbar-default {
height: 80px;
}
.navbar-brand {
float:left;
font-size:18px;
line-height:80px;
height:80px;
padding:0 15px;
}
.navbar-toggle {
margin-top: 23px;
padding: 9px 10px !important;
}
.navbar-nav > li > a {
height: 80px;
padding-top:10px;
padding-bottom:10px;
line-height:20px;
border-left: 1px solid #e7e7e7;
}
.navbar-left {
float:left!important;
}
.navbar-right {
float:right!important;
margin-right:-15px;
}
.navbar-nav>li>.dropdown-menu {
margin-top:0;
border-top-right-radius:0;
border-top-left-radius:0;
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Bootstrap required meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Links to stylesheets and scripts -->
<link href="style.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Test</title>
</head>
<body>
<!-- NavBar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Leaderboards</li>
<li>Support</li>
<li class="dropdown">
<a class "dropdown-toggle" data-toggle="dropdown" href="#">(username&pp)
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Settings</li>
<li>Statistics</li>
<li>History</li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
</nav>
</body>
</html>
Try adding the following flex properties inside of your .navbar-nav > li > a CSS block:
display: flex;
align-items: center;
So the .navbar-nav > li > a block should now look like this:
.navbar-nav > li > a {
display: flex;
align-items: center;
height: 80px;
padding-top: 10px;
padding-bottom: 10px;
line-height: 20px;
border-left: 1px solid #e7e7e7;
}
CodePen Demo
I think I get the problem(may be)... use this css code...I think this is exactly what you need
.navbar.navbar-default {
min-height: 80px;
}
.container-fluid {
margin-top: 15px;
}
to change font-size change it differently for .navbar-header and .navbar-brand
friends. I am a very beginner of HTML and CSS
I am a bit confused as to how I can center the text(CUSTOMER, FAQ, and CONTACT) on the navigation bar.
I have tried vertically center-aligned but it still continues to stick to the top. Thank you very much for your help.
nav {
background-color: RGB(80, 80, 95);
height: 50px;
position: fixed;
top: 100px;
width: 100%;
}
nav a {
float: inline;
width: 200px;
padding-top: 10px;
height: 40px;
text-align: center;
font-size: 1.1em;
color: white;
text-decoration: none;
}
.pull-right{
text-aling: center;
}
body{
background-color:black;
font-family:Lobster;
color:white;
}
h1{
padding:0;
margin-top:0px;
font-size:5.0em;
padding-top:0%;
}
.btn-default{
background-color:black;
border-color:black;
color:#337ab7;
font-size:1.7em;
margin-top:1%;
}
.pageOne{
background:url("http://www.chairmanenglish.com/wp-content/uploads/2017/01/img_title_bg.jpg");
background-size:cover;
padding-bottom:10%;
padding-top:10%;
margin-top:80px;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<header>
<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</header>
<div class="pageOne text-center" id="p1">
<ul class="nav nav-pills navbar-fixed-top">
<li class="logo-left-top">
<img src="http://www.chairmanenglish.com/wp-content/uploads/2017/01/img_bi_top.png" width="100px" heigth="50px">
</li>
<li class="pull-right">
CONTACT
</li>
<li class="pull-right">
FAQ
</li>
<li class="pull-right">
CUSTOMER
</li>
</ul>
I was able to get it to work with:
.pull-right{
width: 25%;
}
Along with a correction to some of your errors that others mentioned.
Please take a look here: http://codepen.io/Squeakasaur/pen/vxrgYd
At this moment I am busy with making a nav exactly like this:
Right now I have made this:
How can I fix that logo and dividers like the first image?
I make the website with Bootstrap and I have add some elements you see below in
html, body{
}
nav{
background:#fff;
width:100%;
padding:0px 30px;
}
.navbar-header{
display:block;
text-align:center;
height:80px;
}
.navbar-header img{
margin:0px auto;
height:45px;
}
a.navbar-brand{
padding:20px 30px;
position: absolute;
width:auto;
left:0;
top:0;
text-align:center;
margin:auto;
background-color: red;
}
.navbar-collapse.collapse{
padding:0px;
white-space: nowrap;
}
.navbar{
background:#fff;
width:100%;
margin:0px;
padding-left: 0px;
padding-right: 15px;
z-index:10;
border: 0px solid transparent;
border-radius:0px
}
.navbar > div{
margin-left: 0px;
margin-right: 0px;
}
.collapse, .nabar-right{
margin-right: 0px!important;
}
.navbar ul li a{
background:none;
text-transform:uppercase;
font-family: 'Open Sans', sans-serif;
font-weight:300;
font-size:14px;
color:#000;
letter-spacing: 0.035em;
text-decoration: none;
}
ul.nav li.open ul.dropdown-menu li{
padding:0px 0px;
}
.navbar ul li a:hover{
background:#ffffff;
color:#22257a!important;
}
.navbar ul li a:active{
background:none;
}
.nav-selected{color:#22257a!important; font-weight:700;}
.navbar a.nav-selected{color:#22257a!important; font-weight:700;}
.navbar ul li.nav-path-selected .dropdown-toggle{color:#22257a; font-weight:700;}
/*-------------------------------------------------*/
.caret {
color: #000000;
-webkit-transition: color 0.2s; /* Safari */
transition: color 0.2s;
}
.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
background-color: transparent;
color: #000000 !important;
}
.dropdown-menu {
border:1px solid #f1f1f1;
border-radius: 0;
box-shadow: none;
margin-top: -15px;
padding:0px 0px;
}
.dropdown-menu li {
padding: 2px 16px 2px 16px;
}
.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
background-color: transparent;
}
.dropdown-menu a {
color: #777777 !important;
}
.dropdown-menu > li > a {
padding: 8px 14px;
}
div#ccm-highlighter{z-index:1000; min-height:30px;}
hr {
width: 120px;
border-top: 4px solid black !important;
}
i {
color: white;
}
.intro-top {
width: 100%;
height: 50px;
background-color: red;
float: left;
}
header {
width: 100%;
height: 50px;
background-color: #4d4d4d;
}
header p{
color:white;
}
header i {
float:left;
padding-right: 10px;
}
a{
text-decoration: none !important;
}
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1, user-scalable=0" name="viewport">
<title>Title</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/mobiel.css">
<link rel="stylesheet" href="css/tablet.css">
<link rel="stylesheet" href="css/desktop.css">
<link rel="stylesheet" href="typography.css">
<link href='######' rel='stylesheet' type='text/css'>
<!--[if gte IE 9]><style type="text/css">.gradient {filter: none;}</style><![endif]-->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col-sm-4">
</div>
<div class="col-sm-4">
<a class="navbar-brand" href="#">
<img src="http://itavisen.no/wp-content/uploads/imported/5064692.jpg">
</a>
</div>
<div class="col-sm-2">
<i class="fa fa-phone" aria-hidden="true"></i><p>06 12345678</p>
</div>
<div class="col-sm-2">
<i class="fa fa-envelope" aria-hidden="true"></i><p>#mail.nl</p>
</div>
</div>
</div>
</header>
<div class="container">
<nav class="navbar">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-menu" aria-expanded="false">
<span>Menu</span>
<span class="glyphicon glyphicon-menu-hamburger">
</button>
</div>
<div class="collapse navbar-collapse" id="main-menu">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li class="dropdown">
page2 <span class="caret"></span>
<ul class="dropdown-menu arrow_box">
<li>page1drop</li>
<li>page2drop</li>
</ul>
</li>
<li>page3</li>
<li>Page4</li>
<li role="separator" class="divider">Contact</li>
</ul>
</div>
</nav>
</div>
<div class="intro-top">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Doe,
For the logo you may try z-index to put it in the front of the webpage.
And for the "li" you should use padding and border to get the same result.
If you want to practice by watching code you should find some bootstrap menu template.
e.g. : http://blog.themearmada.com/20-inspiring-bootstrap-menu-examples/
I am trying to change the background color and Text Color of the navigation bar links on hover however I cannot get it to work. No matter what I do there doesnt seem to be any effect.
I have never had a problem when using Pure CSS, but its just mostly with Bootstrap I'm having this problem
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Soni's Computer Repair</title>
<meta name="viewport" content="width=device-width, inital-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="logo">
<center>
<a class="navbar-brand" href="#"><img src="Final.png"/></a>
</center>
</div>
<div class="navbar-header">
<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>Home</li>
<li>Services</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<h6 class="text-center">Copyright © Soni Computer Repairs</h6>
<p class="text-center">www.SoniRepairs.com</p>
</div>
</footer>
</body>
</html>
CSS:
.nav, .navbar-nav {
display: inline-block;
margin:0;
float:none;
margin-top: -15px;
}
.navbar-nav li {
padding-left: 40px;
padding-right: 40px;
}
.navbar .navbar-inverse .navbar-fixed-top > li > a:hover {
color: cyan;
}
.navbar-brand {
float: none;
}
.navbar-center {
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
margin: auto;
height:100%;
}
.navbar .navbar-collapse {
text-align: center;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #f5f5f5;
}
.logo img {
height:80px;
margin-top: -15px;
}
.logo {
width: 40%;
margin: 0 auto;
}
#media screen and (max-width: 700px) {
.navbar-nav{
margin-left: auto;
margin-right: auto;
display: table;
table-layout: fixed;
float:none;
margin-top: 10px;
}
.container img {
height:50px;
display: inline-block;
margin-top: -15px;
}
.navbar-brand {
position: absolute;
width: 100%;
left: 0;
text-align: center;
margin: auto;
}
.navbar > .container {
text-align: center;
}
.collapse.navbar-collapse {
width: auto;
clear: none;
}
}
You html code shows navbar-static-top
<div class="navbar navbar-inverse navbar-static-top"></div>
and in your css you are using .navbar-fixed-top
.navbar .navbar-inverse .navbar-fixed-top > li > a:hover {
color: cyan;
}
Updated fiddle https://jsfiddle.net/3ge0b6nr/1/
Change your code to
.navbar.navbar-inverse.navbar-static-top li > a:hover {
color: cyan;
}
Here is a Sample jsFiddle based on your code.
Just add this css code to your css :
.navbar-inverse .navbar-nav > li > a {
color: red;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:active,
.navbar-inverse .navbar-nav > li > a:focus{
color: green;
background-color: red;
}
Just change it to which color you want.