I have a navbar in my project which renders as expected in chrome, FF and IE 11, but somehow Internet Edge is special.
Below is the html code which defines the navbar:
<nav class="navbar navbar-default navbar-static-top" style="margin-bottom: 0px" id="mainNavbar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="desktop.aspx">
<img id="Image1" style="padding-top:0px; padding-left:0px;width:200px;height:44px;" src="logo.png"/>
</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="affected.aspx"><img src="log-incident-icon.svg" style="height:25px;"/>
<span style="margin-left:5px;">Log an incident</span></a></li>
<li id="adminMenuItem">
<a href="myIncidents.aspx">
<img src="my-incidents-icon.svg" style="height:25px;"/>
<span style="margin-left:5px;">My Incidents</span>
</a>
</li>
<li>
<a href="incidentRegister.aspx">
<img src="allocate-incident-icon.svg" style="height:25px;"/>
<span style="margin-left:5px;">Allocate incident</span>
</a>
</li>
<li>
<a href="dashboard.aspx">
<img src="dashboard-icon.svg" style="height:25px;"/>
<span style="margin-left:5px;">Dashboard</span>
</a>
</li>
<li>
<a href="admin.aspx">
<img src="settings-icon.svg" style="height:25px;"/>
<span style="margin-left:5px;">Admin</span>
</a>
</li>
<li>
<a href="default.aspx">
<img src="logout-icon.svg" style="height:25px;"/>
<span style="margin-left:5px;">Log out</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
Below is what the navbar should look like:
And here is what Microsoft Edge spits out:
The link tags seem to be taking up all the space, but I can't figure out a way to make them shrink to the width of the content without breaking the layout further. Any suggestions?
I've just found out that I have the same issue.
When I removed the svg icons, it worked. Try using .png, .jpg or whatever. Must do the same for items with icons inside the menu!
Header file is written to IE compatibility guide. Create a new CSS file, dedicated to deal with Internet explorer browser compatibility problems.
Related
I have the following data-toggle i want to collapse for the menu. I have provided the necessary bootstrap classes, but it's still not working either.
Html code:
<div class="navbar navbar-compact">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a rel="nofollow" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse" title="Toggle menu">
<span class="menu-name">Menu</span>
<span class="menu-bars">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</span>
</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse">
<ul class="nav" id="topMenu" data-submenu="horizontal">
<li class=" active ">
<a rel="nofollow" href="//ss-template-blog03.simplesite.com/434337774">FRONT PAGE</a>
</li>
<li class=" ">
<a rel="nofollow" href="//ss-template-blog03.simplesite.com/434337775">BLOG</a>
</li>
<li class=" ">
<a rel="nofollow" href="//ss-template-blog03.simplesite.com/434337777">CONTACT</a>
</li>
</ul>
</div>
</div>
</div>
</div>
My Bootstrap classes that i have loaded into my project
bootstrap.collapse-2.3.2.js
bootstrap.dropdown-2.3.2.js
bootstrap.modal-2.3.2.js
I have my own CSS for the styling
This is how i load my js files
You have 2 copy of Jquery.js files...
remove one of them
And include Bootstrap.js file after Jquery.js file.
Update:
Do not remove dot in ".nav-collapse" as suggested in another answer.
if this does not work.. try removing all other Bootstrap includes
I have Created Jsfidle:
[https://jsfiddle.net/DTcHh/40014/]
How do I center list items on a container-fluid navigation? I have been jsfiddling with this for hours. I havent gotten anything that works properly. Looked over a ton of websites for answers.
<nav class="navbar navbar-info navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <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="hidden-xs" href="#">
<div class="logo-container">
<div><img src="assets/img/logo-header-optimized.svg" alt="" height="52" style="margin:10px 0px 10px 0px"></div>
</div>
</a> <a class="visible-xs navbar-brand"><img src="assets/img/phone-logo-header-optimized.svg" alt="" height="22"></a> </div>
<div>
<ul class="hidden-xs nav navbar-nav navbar-right" style="margin-top:10px">
<li>
<button type="button" class="btn btn-inverse navbar-btn btn-raised" onclick="window.open('')"><strong> BOOK NOW </strong></button>
</li>
</ul>
</div>
</div>
<div class="container-fluid">
<div class="navbar-header">
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li> Introduction <i class="material-icons"></i>
</li>
<li> Amenities <i class="material-icons"></i>
</li>
<li> Hospitality <i class="material-icons"></i>
</li>
<li> Information <i class="material-icons"></i>
</li>
</ul>
</div>
</div>
</div>
First: The div <div class="navbar-header"> should have a "witdh:100%".
Second: between insert a div with this style="width: 60%; margin: 0 auto;"
The width: 60% depending of elements
I tried the solution by Julian and it lowers the button on the left and I dont think he wants that. The two solutions that I have are to add one of 2 css styles.
First one .navbar-header {padding: 0 300px;} this will center the list items but will also move the image with it
Second one .navbar-nav {padding: 0 300px;} this will center the list items but will also bring the button closer to the middle but still in the same row as the image.
If you want to dig deeper, I recommend reading this
Navbar how it should be:
I want the text idealize, develop, prototype and about to appear next to the icons only in the collapsable navbar. The text appears on larger viewport sizes, too, what I don't want:
HTML
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" id="logo" href="#">
<img src="images/avezlogo.png">
</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li id="orange"><a href="#idealize">
<img src="images/bulb.png"><span class="collapse">idealize</span>
</a></li>
<li id="cyan"><a href="#develop">
<img src="images/laptop.png"><span class="tittle">develop</span>
</a></li>
<li id="purple"><a href="#prototype">
<img src="images/printer.png"><span class="tittle">prototype</span>
</a></li>
<li id="red" class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#about">
<img src="images/dots.png" id="dots"><span class="tittle">about</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
Sorry about any noob mistakes on my code. I'm new to Bootstrap and web design. Any help is appreciated. Thanks!
You can use display: none; inside of a media query to target and hide your images at the mobile breakpoint. See example.
#media (min-width: 768px) {
.navbar-inverse .navbar-nav li img {
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" id="logo" href="#">
<img src="images/avezlogo.png">
</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li id="orange">
<a href="#idealize">
<img src="images/bulb.png"><span class="collapse"> idealize</span>
</a>
</li>
<li id="cyan">
<a href="#develop">
<img src="images/laptop.png"><span class="tittle"> develop</span>
</a>
</li>
<li id="purple">
<a href="#prototype">
<img src="images/printer.png"><span class="tittle"> prototype</span>
</a>
</li>
<li id="red" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#about">
<img src="images/dots.png" id="dots"><span class="tittle"> about</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
That's how it should behave. Links should be seen in all viewport sizes. If you only want to see the links in the collapsable navbar and not in the not-collapsable navbar, you can do this:
#media (min-width: 768px) {
#myNavbar .navbar-right {
display: none;
}
But then you see in larger viewport sizes a blank navbar without a toggle icon on the right side. And that's not what you want, I think.
If you want a collapsable navbar all the time, the best solution would be to customize the Bootstrap CSS here:
Bootstrap customize grid
and set the #grid-float-breakpoint to a large width, e.g. 3000px. Download and compile and the CSS should do it.
the media query worked fine. Thanks a lot. I was also wondering. Why doesn't the dropdown menu in the first image close after clicking one of the links? I have to click the menu button again for it to close. How could I change this? Thanks again.
Working everywhere else except iPads, view port also added:
<meta name="viewport" content="width=device-width, initial-scale=1">
Please help me find a solution, see my website.
Here is how the result is viewed on iPhone.
Here is how the result is viewed on iPad.
HTML:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="top">
<div class="container topmenu">
<ul class="nav nav-pills pull-right" style="margin-top: -1px;">
<li role="presentation">Login
</li>
<li role="presentation">Register
</li>
<li role="presentation">
<a href="https://www.facebook.com/pages/allvideolecturescom/320909451432640" class="soc">
<img src="http://allvideolectures.com/img/facebook_top.png" alt="" />
</a>
</li>
<li role="presentation">
<a href="https://twitter.com/videolecture" class="soc">
<img src="http://allvideolectures.com/img/twitter_top.png" alt="" />
</a>
</li>
<li role="presentation">
<a href="https:/google.com/+Allvideolectures" class="soc">
<img src="http://allvideolectures.com/img/google_top.png" alt="" />
</a>
</li>
</ul>
</div>
</div>
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="http://allvideolectures.com/">
<img src="http://allvideolectures.com/img/logo.png" alt="all video lectures let's learn" /><span class="logoleft">ALLVIDEO</span><span class="logoright">LECTURES.COM</span>
</a>
</div>
<div id="navbar" class="navbar-collapse collapse mainmenu">
<ul class="nav navbar-nav pull-right">
<li role="presentation">Home
</li>
<li role="presentation" class="active">Courses
</li>
<li role="presentation">Blog
</li>
<li role="presentation">About
</li>
<li role="presentation">Contact us
</li>
<li role="presentation">
<form method="get" action="http://allvideolectures.com/search/">
<input type="text" name="search" class="form-control" required placeholder="Start Learning...">
<input type="submit" value="" class="searchbtn1">
</form>
</li>
</ul>
</div>
<!--/.navbar-collapse -->
</nav>
First you should read documentation of the framework you're using:
Changing the collapsed mobile navbar breakpoint
The navbar collapses into its vertical mobile view when the viewport is narrower than #grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least #grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest "small" or "tablet" screen).
Your code works well, but using default variable value.
If you want collapsed navbar (and other components maybe too) on 768px, you should override your variables.less file with a larger value, for example with #screen-md-min (992px):
#grid-float-breakpoint: #screen-md-min;
For more information about Bootstrap variables overriding see this question.
li href with '#' works fine but I'd like to write url of the another page. I tried to add some divs, forms or btn from bootstrap but that solution makes my page messy(unexpected margins or something strange).
I have no idea how to solve the problem.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- 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="#menu">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="wow fadeInRight" data-wow-duration="2s">
<a class="navbar-brand" href="#home"></a>
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="menu">
<ul class="nav navbar-nav navbar-right">
<!-- Sklep -->
<li>Sklep
</li>
<!-- SOCIAL -->
<li style="padding-top:9px; margin-left:50px;">
<a href="https://www.facebook.com" target="blank" style="padding:0 5px; margin-top:auto;margin-bottom:auto;" class="social">
<img src="img/ikony/facebook-2-32.png" alt="">
</a>
<a href="https://www.youtube.com" target="blank" style="padding:0 5px; margin-top:auto;margin-bottom:auto;" class="social">
<img src="img/ikony/youtube-2-32.png" alt="">
</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
I don't completely understand your question, however when I have formatting issues with href tags, I tend to use JavaScript:
<div onclick="http://ebay.com" />
Perhaps if you explain your question a little better I may be able to help.