I have a main category and main category has its subcategory list in database. So its a relational database. For better understanding .edmx map picture is attached. Now my goal is a partial view called _GuestNav.cshtml will contain category and subcategory list display then this _GuestNav.cshtml will be called from _Layout.cshtml. So i am calling a partial view from _Layout.cshtml and that partial view contains dynamic data with foreach loop. So i want to know how can i loop properly to display Main Category and sub Category on _GuestNav.cshtml? I have tried my best to give you better understanding however ask me any question you may have.
Controller:
[ChildActionOnly]
public PartialViewResult _GuestNav()
{
using (var db = new MyAppWebEntities())
{
return PartialView("_GuestNav", db.Categories.ToList());
}
}
_Layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
<link href="~/Content/font-awesome.min.css" rel="stylesheet" />
<script src="~/Content/sweetalert.min.js"></script>
<script src='https://www.google.com/recaptcha/api.js'></script>
#RenderSection("scripts", required: false)
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<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">
<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="#Url.Action("Index", "Home")">My App <i class="fa fa-refresh" aria-hidden="true"></i></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
#Html.Partial("_GuestNav"); #* here i am calling partial view *#
</div>
</div>
</div>
</nav>
<div class="container body-content">
#RenderBody()
<hr />
#Html.Partial("_Footer")
</div>
</body>
</html>
_GuestNav.cshtml:
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Plans", "Plans", "Home")</li>
#* Example of loop bellow *#
#*#foreach (var allcat in allcats)
{
<li class="dropdown">
#allcat.MainCatName<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
#foreach (var subcat in allcat.subcat)
{
<li>subcat.SubcatName</li>
}
</ul>
</li>
}*#
#* Wanted output like bellow from database---> *#
<li class="dropdown">
Main Cat 1<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Subcat</li>
<li>Subcat</li>
<li>Subcat</li>
<li>Subcat</li>
</ul>
</li>
<li class="dropdown">
Main Cat 2<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Subcat</li>
<li>Subcat</li>
<li>Subcat</li>
<li>Subcat</li>
</ul>
</li>
</ul>
1.Change #Html.Partial("_GuestNav") to #{Html.RenderAction("_GuestNav", "YourControlerName");}
2.Add #Model TypeofYourViewModel on top of your partial view.
3.Change the looping as follows:
#foreach (var item in Model)
{
<li class="dropdown">
#item.MainCatName<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
#foreach (var subcat in item.subcat)
{
<li>subcat.SubcatName</li>
}
</ul>
</li>
}
Note: Change TypeofYourViewModel to whatever ViewModel you are passing into the partial view
Related
I have started a new project in MVC 5 and i have downloaded a bootstrap template. the template works okay as a normal website.. But when I try to integrate it on the .net project it doesn't works. I have attached picture for better understatement.
Normal HTML image.
MVC Project Image
Here is my MVC code in _Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" href="../../Content/img/favicon.png" type="image/png">
<title>Fashiop</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="#Url.Content("../../Content/bootstrap.css")">
<link rel="stylesheet" href="#Url.Content("../../Content/vendors/linericon/style.css")">
<link rel="stylesheet" href="#Url.Content("../../Content/css/font-awesome.min.css")">
<link rel="stylesheet" href="#Url.Content("../../Content/vendors/owl-carousel/owl.carousel.min.css")">
<link rel="stylesheet" href="#Url.Content("../../Content/vendors/lightbox/simpleLightbox.css")">
<link rel="stylesheet" href="#Url.Content("../../Content/vendors/nice-select/css/nice-select.css")">
<link rel="stylesheet" href="#Url.Content("../../Content/vendors/animate-css/animate.css")">
<link rel="stylesheet" href="#Url.Content("../../Content/vendors/jquery-ui/jquery-ui.css")">
<!-- main css -->
<link rel="stylesheet" href="#Url.Content("../../Content/css/style.css")">
<link rel="stylesheet" href="#Url.Content("../../Content/css/responsive.css")">
</head>
<body>
<!--================Header Menu Area =================-->
<header class="header_area">
<div class="top_menu row m0">
<div class="container-fluid">
<div class="float-left">
<p>Call Us: 012 44 5698 7456 896</p>
</div>
<div class="float-right">
<ul class="right_side">
<li>
<a href="login.html">
Login/Register
</a>
</li>
<li>
<a href="#">
My Account
</a>
</li>
<li>
<a href="contact.html">
Contact Us
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="main_menu">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<a class="navbar-brand logo_h" href="index.html">
<img src="img/logo.png" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse offset" id="navbarSupportedContent">
<div class="row w-100">
<div class="col-lg-7 pr-0">
<ul class="nav navbar-nav center_nav pull-right">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item submenu dropdown">
Shop
<ul class="dropdown-menu">
<li class="nav-item">
<a class="nav-link" href="category.html">Shop Category</a>
<li class="nav-item">
<a class="nav-link" href="single-product.html">Product Details</a>
<li class="nav-item">
<a class="nav-link" href="checkout.html">Product Checkout</a>
<li class="nav-item">
<a class="nav-link" href="cart.html">Shopping Cart</a>
</li>
<li class="nav-item">
<a class="nav-link" href="confirmation.html">Confirmation</a>
</li>
</ul>
</li>
<li class="nav-item submenu dropdown">
Blog
<ul class="dropdown-menu">
<li class="nav-item">
<a class="nav-link" href="blog.html">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="single-blog.html">Blog Details</a>
</li>
</ul>
</li>
<li class="nav-item submenu dropdown">
Pages
<ul class="dropdown-menu">
<li class="nav-item">
<a class="nav-link" href="login.html">Login</a>
<li class="nav-item">
<a class="nav-link" href="tracking.html">Tracking</a>
<li class="nav-item">
<a class="nav-link" href="elements.html">Elements</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
<div class="col-lg-5">
<ul class="nav navbar-nav navbar-right right_nav pull-right">
<hr>
<li class="nav-item">
<a href="#" class="icons">
<i class="fa fa-search" aria-hidden="true"></i>
</a>
</li>
<hr>
<li class="nav-item">
<a href="#" class="icons">
<i class="fa fa-user" aria-hidden="true"></i>
</a>
</li>
<hr>
<li class="nav-item">
<a href="#" class="icons">
<i class="fa fa-heart-o" aria-hidden="true"></i>
</a>
</li>
<hr>
<li class="nav-item">
<a href="#" class="icons">
<i class="lnr lnr lnr-cart"></i>
</a>
</li>
<hr>
</ul>
</div>
</div>
</div>
</div>
</nav>
</div>
</header>
<!--================Header Menu Area =================-->
#*<div class="navbar navbar-inverse navbar-fixed-top">
<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>
</button>
#Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</div>
</div>
</div>*#
#*<div class="container body-content">*#
#RenderBody()
#*<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>*#
<script src="#Url.Content("../../Scripts/jquery-3.2.1.min.js")"></script>
<script src="#Url.Content("../../Scripts/popper.js")"></script>
<script src="#Url.Content("../../Scripts/bootstrap.min.js")"></script>
<script src="#Url.Content("../../Scripts/stellar.js")"></script>
<script src="#Url.Content("../../Content/vendors/lightbox/simpleLightbox.min.js")"></script>
<script src="#Url.Content("../../Content/vendors/nice-select/js/jquery.nice-select.min.js")"></script>
<script src="#Url.Content("../../Content/vendors/isotope/imagesloaded.pkgd.min.js")"></script>
<script src="#Url.Content("../../Content/vendors/isotope/isotope-min.js")"></script>
<script src="#Url.Content("../../Content/vendors/owl-carousel/owl.carousel.min.js")"></script>
<script src="#Url.Content("../../Scripts/jquery.ajaxchimp.min.js")"></script>
<script src="#Url.Content("../../Content/vendors/counter-up/jquery.waypoints.min.js")"></script>
<script src="#Url.Content("../../Content/vendors/flipclock/timer.js")"></script>
<script src="#Url.Content("../../Content/vendors/counter-up/jquery.counterup.js")"></script>
<script src="#Url.Content("../../Scripts/mail-script.js")"></script>
<script src="#Url.Content("../../Scripts/theme.js")"></script>
</body>
</html>
I implemented a multi-language website by using resources files in Asp.net MVC.
All works fine, but my problem is in the layout. How I can use dynamic resources in my layout using view-bag?
I need to write something like this somewhere in my layout but I dont know what is the correct way to do this:
#{ var langu = ViewBag.lang;}
#Resources.langu.App_Name;
it has Error of course.
here is my layout page if needed:
<!DOCTYPE html>
<html>
<head>
.....
</head>
<body>
<div class="preloader">
<div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</div>
<!-- Header
============================================ -->
<div class="header">
<div class="container relativesaz">
<div class="row">
<div class="col-sm-12">
<!-- Navbar Header -->
<div class="navbar-header">
<!-- Menu Toggle -->
<button class="menu-toggle"><i class="fa fa-navicon"></i></button>
<!-- Logo -->
<a class="iconvrf logo navbar-brand relativesaz" href="" target="_blank">
<img src="" alt="" />
<span class="fontsmall">
</span>
</a>
</div>
<!-- Menu -->
<div class="menu">
<nav>
<ul>
<li class="active">Home</li>
<li>About</li>
<li>Feature</li>
<li>Description</li>
<li>Screenshot</li>
<li>AW </li>
<li>
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
#ViewBag.ActiveMenu
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<ul>
<li><a class="colorblack" href="#Url.Action("ru", "Home")">Russian</a></li>
<li><a class="colorblack" href="#Url.Action("cn", "Home")">Chinese</a></li>
<li><a class="colorblack" href="#Url.Action("jp", "Home")">Japanese</a></li>
<li><a class="colorblack" href="#Url.Action("nl", "Home")">Dutch</a></li>
<li><a class="colorblack" href="#Url.Action("dk", "Home")">Danish</a></li>
<li><a class="colorblack" href="#Url.Action("de", "Home")">German</a></li>
<li><a class="colorblack" href="#Url.Action("fr", "Home")">French</a></li>
<li><a class="colorblack" href="#Url.Action("en", "Home")">English </a></li>
</ul>
</li>
<li>
<ul>
<li><a class="colorblack" href="#Url.Action("tr", "Home")">Turkish</a></li>
<li><a class="colorblack" href="#Url.Action("th", "Home")">Tahi</a></li>
<li><a class="colorblack" href="#Url.Action("sv", "Home")">Swedish</a></li>
<li><a class="colorblack" href="#Url.Action("pt", "Home")">Portuguese</a></li>
<li><a class="colorblack" href="#Url.Action("no", "Home")">Norwegian</a></li>
<li><a class="colorblack" href="#Url.Action("kr", "Home")">Korean</a></li>
<li><a class="colorblack" href="#Url.Action("es", "Home")">Spanish</a></li>
<li><a class="colorblack" href="#Url.Action("it", "Home")">Italian </a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
#RenderBody()
<script src="~/Scripts/plugins.js"></script>
<script src="~/Scripts/main.js"></script>
</body>
</html>
You can directly use resx without viewbag like this:
Solution
A layout and two resx.
_Layout.cshtml
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">
#if (System.Globalization.CultureInfo.CurrentCulture.ToString() == "fa-IR")
{
#Resource_fa_IR.App_Name
}
else
{
#Resource.App_Name
}
</p>
</div>
</div>
</header>
Resource.Designer.cs and Resource.fa.IR.Designer.cs
public static string App_Name {
get {
return ResourceManager.GetString("App_Name", resourceCulture);
}
}
You should change internal to public in there classes.
The html.Partial doesn't working very well, in fact it shows just path ~/Views/Shared/IconMenuPSA.cshtml, instead of showing the HTML content.
Where am I doing wrong?
My simple custom Helper in App_Code folder:
Helper
#using System.Web.Mvc.Html
#helper DefaultTitle(System.Web.Mvc.HtmlHelper html, string content) {
<br />
<div class="well well-sm text-center text-primary">
html.Partial("~/Views/Shared/IconMenuPSA.cshtml")
<p style="font-size:x-large">#content</p>
</div>
}
View
#model DatiGeneraliViewModel
#{
ViewBag.Title = "DatiGenerali";
Layout = "~/Views/Shared/_LayoutMainPage.cshtml";
}
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryui")
#Scripts.Render("~/bundles/bootstrap")
#MyHelper.DefaultTitle(Html, "Dati Generali")
PartialView
<div style="float:left">
<!-- Split button -->
<div class="btn-group">
<a href="MainPage" class="btn btn-primary" title="Torna al cruscotto">
<span class="glyphicon glyphicon-tasks"></span>
</a>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Cruscotto</li>
<li role="separator" class="divider"></li>
<li>Dati Generali</li>
<li role="separator" class="divider"></li>
<li>Riepilogo </li>
</ul>
</div>
</div>
How do I fix this?
Thanks.
I'm using ui-boostrap dropdown directive, and want to add my own ng-if to prevent showing it on some cases.
When adding this ng-if, even when it always returns "true" - the dropdown stop working (doesn't pop up). It seems the drop-down button stops receiving ng-click events (therefore not changing the isOpen state..).
HTML:
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.2.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="DropdownCtrl">
<!-- Single button -->
<div class="btn-group" uib-dropdown is-open="status.isopen">
<!-- When putting this ng-if, the drop down stops working -->
<div ng-if="isAllowed()">
<button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul class="uib-dropdown-menu" role="menu" aria-labelledby="single-button">
<li role="menuitem">Action</li>
<li role="menuitem">Another action</li>
<li role="menuitem">Something else here</li>
<li class="divider"></li>
<li role="menuitem">Separated link</li>
</ul>
</div>
</div>
<script type="text/ng-template" id="dropdown.html">
<ul class="uib-dropdown-menu" role="menu" aria-labelledby="button-template-url">
<li role="menuitem">Action in Template</li>
<li role="menuitem">Another action in Template</li>
<li role="menuitem">Something else here</li>
<li class="divider"></li>
<li role="menuitem">Separated link in Template</li>
</ul>
</script>
</div>
</body>
</html>
JS:
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DropdownCtrl', function ($scope, $log) {
$scope.items = [
'The first choice!',
'And another choice for you.',
'but wait! A third!'
];
$scope.status = {
isopen: false
};
$scope.toggled = function(open) {
$log.log('Dropdown is now: ', open);
};
$scope.toggleDropdown = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.status.isopen = !$scope.status.isopen;
console.log('isOpen = ' + $scope.status.isopen);
};
$scope.isAllowed = function() {
return true;
}
});
Here is a plunker reproduce the problem:
http://plnkr.co/edit/8K9MUsDfFcjyiZvFdv5x?p=preview
Any ideas?
Take out the div with the ng-if on it and put the ng-if on the enclosing div, i.e.
<div class="btn-group" uib-dropdown is-open="status.isopen" ng-if="isAllowed()">
<button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul class="uib-dropdown-menu" role="menu" aria-labelledby="single-button">
<li role="menuitem">Action</li>
<li role="menuitem">Another action</li>
<li role="menuitem">Something else here</li>
<li class="divider"></li>
<li role="menuitem">Separated link</li>
</ul>
</div>
I got an empty space between my navigation bar and the next division. I don't know where it comes from, here's my code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- 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>
</head>
<body>
<!-- Navigation bar -->
<div id = "menu">
<nav class="navbar navbar-default">
<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>
</button>
<a class="navbar-brand" href="/">Menu</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class = "menu-view"><a><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
<li class = "menu-edit"><a><span class="glyphicon glyphicon-arrow-left"></span> Undo</a></li>
<li class = "menu-edit"><a>Redo <span class="glyphicon glyphicon-arrow-right"></span></a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class = "menu-edit"><a><span class="glyphicon glyphicon-ok"></span> Save</a></li>
<li class = "menu-edit"><a id = "a-cancel" href=""><span class="glyphicon glyphicon-remove"></span> Cancel</a></li>
</ul>
</div>
</nav>
</div>
<div style = "background-color: red">
Empty space above me !
</div>
</body>
</html>
I'm adding these extra lines because my post need some more detail before posting... what the heck is that...
First be careful you have load error :
Uncaught Error: Bootstrap's JavaScript requires jQuery(anonymous function) # bootstrap.min.js:6
Try this I add class to nav which avoid margin-bottom :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- 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>
<style>
.margin-bottom-0 {
margin-bottom: 0;
}
</style>
</head>
<body>
<!-- Navigation bar -->
<div id = "menu">
<nav class="navbar navbar-default margin-bottom-0">
<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>
</button>
<a class="navbar-brand" href="/">Menu</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class = "menu-view"><a><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
<li class = "menu-edit"><a><span class="glyphicon glyphicon-arrow-left"></span> Undo</a></li>
<li class = "menu-edit"><a>Redo <span class="glyphicon glyphicon-arrow-right"></span></a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class = "menu-edit"><a><span class="glyphicon glyphicon-ok"></span> Save</a></li>
<li class = "menu-edit"><a id = "a-cancel" href=""><span class="glyphicon glyphicon-remove"></span> Cancel</a></li>
</ul>
</div>
</nav>
</div>
<div style = "background-color: red">
Empty space above me !
</div>
</body>
</html>