I tried to make top navbar left side logo and center text and right text as size of logo. i able to make left left side logo on top navbar and text on right side of the top navbar but unable to make some text in the center other top navbar, even facing the problem to make right side text(i tried to add clearflex) size as logo.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Theme CSS -->
<link
href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css"
rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- Favicon -->
<link rel="shortcut icon" href="img/favicon.ico">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.bs-example {
margin: 20px;
font-weight: 700px;
}
</style>
</head>
<body>
<!------Top navbar------------->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container fluid">
<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="img/logo1.jpg"
height="48" width="202" class="pull-left"></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"><a href="#"
style="color: blue; margin-left: 6em">Ticket top displaying
important things/ messages/ reminders/ tax dates/ Times
reminders </a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><div class="navbar-brand">Experiencing </div></li>
<!-- <li class="dropdown">
First Name Last name <span class="caret"></span>
<ul class="dropdown-menu">
<center> <li>Logout</li></center>
</ul>
</li>-->
</ul>
<!-- /.navbar-collapse -->
</div>
</div>
</div>
</body>
</html>
I tried to do like this image:
Add these styles
.navbar-default .navbar-brand {
padding: 0;
display: flex;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Theme CSS -->
<link href="css/style.css" rel="stylesheet">
<!-- Favicon -->
<link rel="shortcut icon" href="img/favicon.ico">
<script
src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.bs-example {
margin: 20px;
font-weight: 700px;
}
.navbar-default .navbar-brand {
padding: 0;
display: flex;
align-items: center;
}
</style>
</head>
<body>
<!------Top navbar------------->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container fluid">
<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="img/logo1.jpg"
height="48" width="202" class="pull-left"></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"><a href="#"
style="color: blue; margin-left: 6em">Ticket top displaying
important things/ messages/ reminders/ tax dates/ Times
reminders </a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><div class="navbar-brand">Experiencing </div></li>
<!-- <li class="dropdown">
First Name Last name <span class="caret"></span>
<ul class="dropdown-menu">
<center> <li>Logout</li></center>
</ul>
</li>-->
</ul>
<!-- /.navbar-collapse -->
</div>
</div>
</div>
</body>
</html>
Related
I have a fixed navbar and the body is scrollable. I want to add a layer on top of navbar without affecting the scrollable capability but my navbar is fixed at the top. How can I solve this.
Here is my code
<html lang="en">
<head>
<meta charset="utf-8">
<title> hot</title>
<meta name="description" content="Wiredwiki App">
<!-- Latest compiled and minified CSS -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link href="css/styles.css" rel="stylesheet">
</head>
<style>
body{
padding-top: 40px;
}
</style>
<body data-spy="scroll" data-target="#my-navbar">
<!-- Navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
<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>
<span class="icon-bar"></span>
</button>
</div><!-- Navbar Header-->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>Home
<li>Our Services
<li>Gallery
<li>Faq
<li>ContactUs
</ul>
</div>
</div><!-- End Container-->
</nav><!-- End navbar -->
You can wrap your content in navbar-fixed-top class.
<html lang="en">
<head>
<meta charset="utf-8">
<title> hot</title>
<meta name="description" content="Wiredwiki App">
<!-- Latest compiled and minified CSS -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link href="css/styles.css" rel="stylesheet">
</head>
<style>
body {
padding-top: 90px;
}
.root {
min-height: 100vh;
}
</style>
<body data-spy="scroll" data-target="#my-navbar">
<div class="navbar-fixed-top">
<p>I am top of navbar</p>
<!-- Navbar -->
<nav class="navbar navbar-inverse" id="my-navbar">
<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>
<span class="icon-bar"></span>
</button>
</div><!-- Navbar Header-->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>Home
<li>Our Services</li>
<li>Gallery</li>
<li>Faq</li>
<li>ContactUs</li>
</li>
</ul>
</div>
</div><!-- End Container-->
</nav><!-- End navbar -->
</div>
<div class="root">
<p>MY HEIGHT IS TOO LONG</p>
</div>
</body>
I'm a beginner web developper, and I'm working on a homepage. Yet I'm stuck: for some reasons, my divs just won't stack on top of each other like they should (at least I think so), the blue one keep appearing in the center of the page, no matter what I do. I tried a whole lot of things, and nothing solved it.
Help!
Best Regards,
-Solar Palms
PS: There's my code ...
body{
background:url(trees.jpg);
background-size:cover;
background-postion: center;
}
h1{
color: white;
}
main{
text-align: center;
padding-top: 15%;
}
.lol{
width: 100%;
height: 100%;
clear: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type='text/css' href="Home.css">
<!-- The JQuery Link -->
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<!-- HUGE NAVBAR -->
<div class='lol'>
<header id="header" style="position:sticky; top:0;">
<div class='container'>
</style>
<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="#">GREEN Seed</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="margin-left:15%;">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Home</li>
<li>Our Projects</li>
<li>Rules</li>
<li>About Us</li>
</ul>
<form class="navbar-form navbar-left" style="margin-left:20%">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header>
</div>
<main>
<h1>Are you ready to help to save Our planet!</h1>
<button class="btn btn-default btn-lg">Take actions!</button>
</main>
</div>
<div class='lol' style='background-color: blue; height:100px;'>
</div>
</body>
</html>
Ok,i made header and logo :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="test2.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="navbar navbar-default " role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button class="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-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="#"><img src="images/test1.png" class="img-fluid"></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>HOME</li>
<li>LINK</li>
<li>LINK</li>
<li>LINK</li>
<li>LINK</li>
</ul>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
and CSS:
.navbar-nav {
min-height: 110px;
}
.navbar-brand img {
max-width: 100%;
height: auto;
}
The question is how to my logo image be responsive as I resize the browser and how to header be responsive(when decrease size)? As you can see I put height in external CSS file 110px,and now I want to logo enter inside header(like in full size browser) when resize into small screens. I hope you get it
To keep your header image inside your header at all times you can simply apply max-height: 100%; to your image. This will stop it from overflowing its container. Here is an example: https://jsfiddle.net/rktr4q5v/1/
You can see that the images are both quite small. This is because the class navbar-brand has a height of 50px applied. If you remove this then your images will expand to their original width but remain inside the navbar. Here is an example of this: https://jsfiddle.net/rktr4q5v/2/
If you need to do specific size styling for your logos then you will need to use media queries to change the size of your logo at different screen widths. The documentation for this can be found here and a beginners guide can be found here
I have also fixed some of your mistakes. You can refer this.
Adjust your Logo Size in navbar-brand style tag. If requires
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="test2.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="navbar navbar-default " role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-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="#"><img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" class="img-responsive img-rounded" style="max-height: 40px; margin-top: -15%;"></a>
</div>
<div class="navbar-collapse collapse navbar-right">
<ul class="nav navbar-nav">
<li>HOME</li>
<li>LINK</li>
<li>LINK</li>
<li>LINK</li>
<li>LINK</li>
</ul>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
I am setting a background image in my mvc page. For some reason the entire image is not see. I have set the height to 100%. Still dont get the full page. The image on the screen doesnt stretch.Could you know what the problem is >
Please see the screenshot below to understand the problem
layout page
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title - My Kendo UI MVC Application</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2017.1.118/kendo.common-bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2017.1.118/kendo.mobile.all.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2017.1.118/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2017.1.118/kendo.bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2017.1.118/kendo.dataviz.bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/app.css" rel="stylesheet" />
<script src="~/Scripts/jquery-3.1.1.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="#Url.Content("~/Scripts/kendo/2017.1.118/jquery.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2017.1.118/angular.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2017.1.118/jszip.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2017.1.118/kendo.all.min.js")"></script>
</head>
<body >
<header>
<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>
<img src="~/Images/NGSR-logo.jpg" />
</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 navbar-right text-center">
<li><span class="glyphicon glyphicon glyphicon-file" aria-hidden="true"></span><p>Requests</p></li>
<li><span class="glyphicon glyphicon-tasks" aria-hidden="true"></span><p>Activities</p></li>
<li><span class="glyphicon glyphicon glyphicon-file" aria-hidden="true"></span><p>Reports</p></li>
<li><span class="glyphicon glyphicon glyphicon-file" aria-hidden="true"></span><p>Admin</p></li>
<li class="dropdown hideli">
<span class="caret"></span><p>Country</p>
<ul class="dropdown-menu">
<li>DE</li>
<li>GB</li>
<li>FR</li>
</ul>
</li>
<li><span class="glyphicon glyphicon-save" aria-hidden="true"></span><p>Save View</p></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header>
<div id="body">
#RenderBody()
</div>
<footer></footer>
</body>
app.css
#body {
font-family: Helvetica, sans-serif, sans-serif;
font-size:13px;
border-top:none;
/*clear: both;
padding-bottom: 35px;*/
background-image: url('../Images/iNeed__waterfall_BG.jpg');
background-repeat:no-repeat;
background-size:cover;
height: 500px;
}
.navbar {
margin-bottom: 0px;
padding: 0;
background-color:white;
}
.navbar-header img{
width: auto;
height: auto;
padding-top:15px;
}
nav navbar-nav navbar-right{
text-align:center;
}
.hideli {
padding-right: 200px;
}
If you see in the code above the
I wrote a custom bootstrap header as shown in the screen shot:
I want that navbar to be moved to right so that it can suit the requirements like this.
I used external CDNs for bootstrap and jquery.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Registration</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<body>
<nav id="myNavbar" class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
<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="images/logo.png" alt="logo"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
CSS:
.navbar-fixed-top {
min-height: 80px;
}
.navbar-fixed-top .navbar-collapse {
max-height: 136px;
}
.navbar-collapse {
margin-top: 1%;
}
.navbar{
background-image: none;
}
#media (min-width: 768px) {
.navbar-fixed-top .navbar-collapse {
max-height: 50px;
}
}
#myNavbar {
background-color:#0067ac;
color:#16ac07;
border-radius:0;
}
Fiddler:
https://jsfiddle.net/z4b2bwg6/9/
How can I do it?
Just add the class .navbar-right to make the menu items float to the right - http://getbootstrap.com/components/#navbar-component-alignment
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>