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">
Related
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 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
html, body {
margin:0;
padding:0;
}
.nav {
margin:0px;
}
.navbar{
margin-bottom:0px;
}
.header{
margin:0px;
padding:0px;
display:block;
vertical-align:middle;
width:100%;
}
<! 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">
<meta name="description" content="">
<meta name="author" content="">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<!-- Custom CSS -->
<link href="css.css" rel="stylesheet" type='text/css'>
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous">
<!--font family-->
<link href='https://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
</head>
<body >
<!--Navigation-->
<nav class="navbar navbar-inverse navbar-static-top">
<div class="conatiner-fluid">
<!--page scroll button for -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target= "#myNavbar">
<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 page-scroll" href="#page-scroll">Website</a>
</div> <!--page scroll button-->
<div>
<div class="collapse navbar-collapse" id="#myNavbar">
<ul class="nav navbar-nav navbar-right" id="#myNavbar">
<li class="hidden"></li>
<li class="page-scroll">Home</li>
<li class="page-scroll">About</li>
<li class="page-scroll">Services</li>
<li class="page-scroll">Contact</li>
</ul>
</div> <!--ul-li-->
</div> <!--navbar collapse-->
</div> <!--container-fluid-->
</nav>
<!--Navigation-->
<!--Header-->
<header >
<div class="container" >
<div class="row">
<img src="work.jpg" class="img-responsive" >
</div>
</div>
</header>
<!--Header-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
</body>
</html>
I'm coding my first website there's some unwanted white space around the header image that won't go away.
I've checked all the usual solutions like setting margin and padding:0;display: block and width:100% but they don't seem to be working.
Could somebody please take a look at the code and let me know what I'm doing wrong?
Replace the
<div class="container"> to <div class="container-fluid">
and give your image
width= 100%.
Something like:
<style>
.width_full {
width: 100%;
}
</style>
<div class="container-fluid">
<div class="row">
<img src="work.jpg" class="img-responsive width_full">
</div>
</div>
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>