Making the logo and text responsive across all resolution and size. I am having a problem where my text gets collapsed when i re-size my browser. How can i ensure that the logo and the text next to is in same line for all resolution and sizes.
<html>
<head>
<title>Header</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script type="text/javascript" src="slider.js"></script>
<style>
.divider-vertical {
height: 50px;
margin-top: 0;
margin-bottom: 0;
margin-left: 20px;
margin-right: 10px;
border-left: 1px solid #a8a8a8;
border-right: 1px solid #a8a8a8;
}
</style>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-default">
<div class="col-sm-3">
<a class="navbar-brand" href="#">BimAssure</a>
<ul class="nav navbar-nav">
<li class="divider-vertical"></li>
<li><h4 style="margin-top: 15px">ACME - New York</h4></li>
</ul>
</div>
</nav>
</div>
</body>
</html>
Below is the fiddle i am being working on. I want the logo and text to be in same line across all resolution and sizes.
http://jsbin.com/yuhibisu/4/edit
You only need to change this
<ul class="nav navbar-nav">
<li class="divider-vertical"></li>
To this:
<ul class="nav navbar-nav divider-vertical">
<li> ...
you have to apply the style to the "ul" and not the "li"
Check it:
http://jsbin.com/yuhibisu/8/edit
Related
I've been having trouble and I'm when I searched the web, I couldn't find the solution to this.
I'm currently using bootstrap to create my website, but when I shrink the page down to mobile/tablet-sized, my navbar list shifts to the left. I want it center-aligned, but ONLY when the screen is small. Otherwise, I want my list to be on the right.
I've included a code sample below:
HTML:
<title>ZebarWorld Landing Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="index.css" rel="stylesheet"/>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class = "container-fluid">
<div class ="navbar-header">
<a class="navbar-brand" href="#"><img src="LogoPurple.png"></a>
</div>
<span class="navbar-text">
We're currently under construction.<br>Join our waitlist to be the first to play at Zebra World!
</span>
<ul class="nav navbar-nav myNav">
<li><a class="navi" href="#">Sign Up for Updates!</a></li>
</ul>
</div>
</nav>
</body>
CSS:
html,body{
background-color: #EE870D;
width:100%;
height:100%;
>}
.navbar{
background-color: #FFFFFF;
margin-top: 30px;
}
.navbar-header{
}
.navbar-brand{
}
.navbar-brand img{
max-width:100%;
width: 300px;
height: auto;
}
.navbar-text{
text-align:center;
}
.navbar-nav{
border-radius: 25px;
background: #A12F2F;
padding: 10px;
}
.myNav{
text-align: center;
}
.myNav li{
float:none;
display:inline-block;
}
a.navi{
text-decoration: none;
}
a.navi:link{
color:white;
}
a.navi:visited{
color: white;
}
a.navi:hover{
color: black;
}
a.navi:target{
color: red;
}
https://jsfiddle.net/0jpsyot2/1/
You should use these classes justify-content-center justify-content-md-between on container tag
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid justify-content-center justify-content-md-between">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="LogoPurple.png"></a>
</div>
<span class="navbar-text">
We're currently under construction.<br>Join our waitlist to be the first to play at Zebra World!
</span>
<ul class="nav navbar-nav myNav">
<li><a class="navi" href="#">Sign Up for Updates!</a></li>
</ul>
</div>
</nav>
By my suggestion you can use the media query in this code
#media (max-width: 645px){
.nav{
margin-left: 50%;
}
}
in this code i use you nav class and apply media query on this.
or you can also use justify-content-center bootstrap class to centralized your button.
<nav class="navbar navbar-default" style="background-color: transparent; max-height: 40px;">
<div class="container-fluid">
<ul class="nav navbar-nav" style="margin-top: 0px; margin-bottom: 0px; padding-left: 15px;">
<li class=""><i class="glyphicon glyphicon-comment" style="color:royalblue;"></i></li>
<li class=""><i class="glyphicon glyphicon-option-horizontal" style="color:royalblue;"></i></li>
<li class="number_three_li"><i class="glyphicon glyphicon-option-horizontal" style="color:royalblue;"></i></li>
</ul>
</div>
</nav>
I want to align #number_three_li to the right-side.
Like From here, I want to pull it to rhe right.
I saw some post saying pull-right in <ul> tag works well.
But because I want these <li> tags not to be collapsed even width is narrower, that is not the right answer for me.
How can I do this?
.nav {
display: flex;
}
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-default" style="background-color: transparent; max-height: 40px;">
<div class="container-fluid">
<ul class="nav navbar-nav" style="margin-top: 0px; margin-bottom: 0px; padding-left: 15px;">
<li class=""><i class="glyphicon glyphicon-comment" style="color:royalblue;"></i></li>
<li class=""><i class="glyphicon glyphicon-list-alt" style=""></i></li>
<li class="#number_three_li"><i class="glyphicon glyphicon-option-horizontal" style="color:royalblue;"></i></li>
</ul>
</div>
</nav>
Use inline-block for the li's instead of flex for the nav ul. Then float the number_three_li to the right.
.nav {
//display: flex;
width: 100%;
}
.nav > li { display: inline-block !important; }
.number_three_li {
float: right;
}
#media (min-width: 768px) {
.navbar-nav>li.number_three_li {
float: right;
}
}
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
</style>
<nav class="navbar navbar-default" style="background-color: transparent; max-height: 40px;">
<div class="container-fluid">
<ul class="nav navbar-nav" style="margin-top: 0px; margin-bottom: 0px; padding-left: 15px;">
<li class=""><i class="glyphicon glyphicon-comment" style="color:royalblue;"></i></li>
<li class=""><i class="glyphicon glyphicon-list-alt" style=""></i></li>
<li class="number_three_li"><i class="glyphicon glyphicon-option-horizontal" style="color:royalblue;"></i></li>
</ul>
</div>
</nav>
I am begginer with bootstrap. I'm trying create the ScrollSpy Bootstrap on my page but it doesn't work. Whatever I do it doesnt work properly and I have no idea why? Could somebody look at my code and tell what is wrong. Here it is:
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<style>
#top-center-photo{
width: 100%;
height: 500px;
background-color: red;
}
#aboutus-content{
width: 100%;
height: 500px;
background-color: green;
}
#offert{
width: 100%;
height: 500px;
background-color: yellow;
}
</style>
</head>
<body data-spy="scroll" data-target=".navbar">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>o nas</li>
<li>oferta</li>
<li>realizacje</li>
</ul>
</div>
</nav>
<div id="top-center-photo">
</div>
<div id="aboutus-content">
</div>
<div id="offert">
</div>
<div id="realizacje">
</div>
the only problem is that you have not linked js file properly
put this code above </body> tag
<!-- Latest compiled and minified JavaScript --><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
Here is your scroll-spy: Demo working fine
There are no errors in your code... its working fine :)
I just started coding and i am building a Website with bootstrap. I want to create a simple Container (id="test") with a background image. I don't know why but i just does not set the background image and i am out of ideas. I am also using external CSS. I just found out that the collapse button is not working. Please help me fix those two Problems.
greetings,
Johannes Getzner
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="MyStyle.css"></link>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<title>FirstWebsite</title>
</head>
<body>
<div id="wrapper">
<div class="navbar navbar-default">
<div id="container">
<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>
<a id="brand" class="navbar-brand">Example</a>
</div>
<div class="collapse navbar-collapse">
<ul id="listleft" class="nav navbar-nav navbar-left">
<li>Home</li>
<li>About</li>
</ul>
<ul id="listright" class="nav navbar-nav navbar-right">
<li>Contact</li>
<li>Blog</li>
</ul>
</div>
</div>
</div>
<div id="test">
</div>
</div>
</body>
</html>
CSS
#brand{
font-size: 300%;
}
.navbar-brand{
position:absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
margin: auto;
}
#listleft{
margin-left: 20%;
}
#listright{
margin-right: 20%;
}
ul li{
font-size: 100%;
}
#test{background-image: url("background2.jpg");
}
Your css looks like it might be ok, but doesn't look like you're setting a height or width on that empty div. Probably you're getting a 0px by 0px empty div with the background of your image
The div with id="test" doesn't have any content; therefore it doesn't have a height. So whatever background you give it won't show up.
Solution: give the div a height in the css.
#test {
background-image: url("background2.jpg");
height: 100px; /* or whatever */
}
(or, put something in the div, like text or something.)
Change the order of style links in head
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="MyStyle.css"></link>
I"m trying to make a bootstrap nav bar like this :
I could manage only this one:
And here is my code:
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./css/bootstrap-theme.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
.nav{
position: absolute;
top: 5px;
right: 190px;
border-left: 3px solid #EEE;
border-right: 3px solid #EEE;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<img src="./imgs/endorse-logo1.png" alt="logo">
</div>
<div class="navbar-header nav">
<ul class="nav nav-pills">
<li class="dropdown">
English<b class="caret"></b>
<ul class="dropdown-menu">
<li>Russian</li>
<li>Chinese</li>
<li>German</li>
<li>Italian</li>
</ul>
</li>
</ul>
</div>
</nav>
</body>
</html>
It isn't even responsive. How can I make a responsive nav bar properly?
If you take a look at the official documentation you will see that there is a lot of mistakes in your code:
you have two navbar-header element, you should have only one, and multiple <ul class="nav navbar-nav"> elements,
you need to wrap your navbar elements (<ul class="nav navbar-nav">) in a <div class="collapse navbar-collapse"> element in order to make it responsive,
you can get rid of your .nav css to fix the navbar top as you are already using navbar-fixed-top,
you are using <ul class="nav nav-pills"> where you should directly use <a class="dropdown-toggle">
etc...
Maybe you should retry to create the navbar from the beginning by following precisely the documentation.