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
Related
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>
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>
I am not able to set the background image in the MVC page to full screen. The output on my screen is as follows
Not sure what the problem is. I have set the background image of the body tag to cover in the app.css file. As you can see in the screenshot, the image is behind the grid and only visible at the top. There is blank space at the bottom of the screen,
My css is as follows
body {
font-family: Helvetica, sans-serif, sans-serif;
font-size: 13px;
border-top: none;
background-image: url('../Images/iNeed__waterfall_BG.jpg');
background-repeat: no-repeat;
background-size: cover;
}
Layout page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</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.223/kendo.common-bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2017.1.223/kendo.mobile.all.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2017.1.223/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2017.1.223/kendo.bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2017.1.223/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.223/jquery.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2017.1.223/angular.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2017.1.223/jszip.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2017.1.223/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">
#*<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">*#
<select class="form-control">
<option>ALL</option>
<option>DE</option>
<option>GB</option>
<option>FR</option>
</select>
<p>Country</p>
#*</a>*#
</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>
#RenderBody()
</div>
</body>
</html>
CSS :
html,body {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover; /* For WebKit*/
-moz-background-size: cover; /* Mozilla*/
-o-background-size: cover; /* Opera*/
background-size: cover; /* Generic*/
}
or :
background-size: 100% 100%;
I am trying to set the background image in the MVC layout page. I have created the css. How do I set it in the layout. Not sure where to put it.
Below is my css file
app.css
body {
font-family: Helvetica, sans-serif, sans-serif;
font-size: 13px;
border-top: none;
background-image: url('../Images/iNeed__waterfall_BG.jpg');
background-repeat: no-repeat;
background-size: cover;
background-color:red;
}
.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;
}
Below is the layout page of my project.
Layout Page
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</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.223/kendo.common-bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2017.1.223/kendo.mobile.all.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2017.1.223/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2017.1.223/kendo.bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2017.1.223/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.223/jquery.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2017.1.223/angular.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2017.1.223/jszip.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2017.1.223/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">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<select>
<option>ALL</option>
<option>DE</option>
<option>GB</option>
<option>FR</option>
</select>
<p>Country</p>
</a>
</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>
#*<img src="~/Images/iNeed__waterfall_BG.jpg" />*#
#RenderBody()
</div>
</body>
</html>
HomeController
public class HomeController : Controller
{
public ActionResult Index()
{
ViewBag.Message = "Welcome to ASP.NET MVC!";
return View();
}
}
index.html
#{
ViewBag.Title = "Home Page";
}
I would place it here:
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/app.css" rel="stylesheet" />
<link href="~/Content/Main.css" rel="stylesheet" /> /* <-- HERE */
I think you have it in the right place, but you need to wrap your filepath in quotes and use the 'background' property.
background: url('../Images/iNeed__waterfall_BG.jpg');
You didn't include your Main.css into your HTML.
Add the following to your HTML <head> section.
<link rel="stylesheet" type="text/css" href="Main.css">
I tried including two bootstrap menus, one vertical and one horizontal in my webpage, but the layout was destroyed. Is there any solution for this?
This is my horizontal menu code:
<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">
<meta name="description" content="">
<meta name="author" content="">
<!-- Bootstrap core CSS -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<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="home.php">Company</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><i class="glyphicon glyphicon-home"></i><span> Home</span></li>
<li><i class="glyphicon glyphicon-pencil"></i><span> Order</span></li>
<li><i class="glyphicon glyphicon-shopping-cart"></i><span> Cart</span></li>
<li><i class="glyphicon glyphicon-earphone"></i><span> Contact Us</span></li>
<li><i class="glyphicon glyphicon-search"></i><span> About Us</span></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><i class="glyphicon glyphicon-registration-mark"></i><span> Register</span></li>
<li class="active"><i class="glyphicon glyphicon-user"></i><span> Login</span></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
and this is my vertical menu code.
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="generator" content="Bootply">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- CSS code from Bootply.com editor -->
<style type="text/css">
#media (min-width: 768px) {
.navbar-collapse {
height: auto;
border-top: 0;
box-shadow: none;
max-height: none;
padding-left:0;
padding-right:0;
}
.navbar-collapse.collapse {
display: block !important;
width: auto !important;
padding-bottom: 0;
overflow: visible !important;
}
.navbar-collapse.in {
overflow-x: visible;
}
.navbar
{
max-width:200px;
margin-right: 0;
margin-left: 0;
margin-top:200px;
}
.navbar-nav,
.navbar-nav > li,
.navbar-left,
.navbar-right,
.navbar-header
{float:none !important;}
.navbar-right .dropdown-menu {left:0;right:auto;}
.navbar-collapse .navbar-nav.navbar-right:last-child {
margin-right: 0;
margin-top:200;
}
}
</style>
</head>
<!-- HTML code from Bootply.com editor -->
<body>
<nav class="navbar navbar-default" role="navigation">
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active">Breads</li>
<li>Cupcakes</li>
<li>Pies</li>
<li>Pastas</li>
<li>Desserts</li>
<li>Caters</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</body></html>
And then I want to include it here.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Categories - Breads</title>
</head>
<body>
<?php include_once("hor_menu.php");?>
<?php include_once("vert_menu.php");?>
</body>
</html>
Is it possible to include both files without destroying the layout?
Try something like this (I've not tested it)
<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">
<meta name="description" content="">
<meta name="author" content="">
<!-- Bootstrap core CSS -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
#media (min-width: 768px) {
.navbar-collapse {
height: auto;
border-top: 0;
box-shadow: none;
max-height: none;
padding-left:0;
padding-right:0;
}
.navbar-collapse.collapse {
display: block !important;
width: auto !important;
padding-bottom: 0;
overflow: visible !important;
}
.navbar-collapse.in {
overflow-x: visible;
}
.navbar
{
max-width:200px;
margin-right: 0;
margin-left: 0;
margin-top:200px;
}
.navbar-nav,
.navbar-nav > li,
.navbar-left,
.navbar-right,
.navbar-header
{float:none !important;}
.navbar-right .dropdown-menu {left:0;right:auto;}
.navbar-collapse .navbar-nav.navbar-right:last-child {
margin-right: 0;
margin-top:200;
}
}
</style>
</head>
<body>
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<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="home.php">Company</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><i class="glyphicon glyphicon-home"></i><span> Home</span></li>
<li><i class="glyphicon glyphicon-pencil"></i><span> Order</span></li>
<li><i class="glyphicon glyphicon-shopping-cart"></i><span> Cart</span></li>
<li><i class="glyphicon glyphicon-earphone"></i><span> Contact Us</span></li>
<li><i class="glyphicon glyphicon-search"></i><span> About Us</span></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><i class="glyphicon glyphicon-registration-mark"></i><span> Register</span></li>
<li class="active"><i class="glyphicon glyphicon-user"></i><span> Login</span></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<nav class="navbar navbar-default" role="navigation">
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active">Breads</li>
<li>Cupcakes</li>
<li>Pies</li>
<li>Pastas</li>
<li>Desserts</li>
<li>Caters</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>