I have a navbar menu in Bootstrap 4. When I resize the page, it resizes after a certain size threshold, but before it collapses, the far-right item "Opportunities" in the navbar is being cutoff.
In other words, it's cutting off items - it eventually collapses if the window gets too small - but before that, it's cutting off. See photo here:
Is there an easy fix here? Code below..
/* ------------------------------Navigation------------------------------*/
/* Navigation pills */
#navPills li{
padding:6px 6px 6px 6px !important;
font-size: 14px !important;
}
#nav-pills ul{
}
/* Navigation pills text*/
.btn.btn-s-md.btn-white.m-b {
font-size: 14px !important;
letter-spacing: .04em;
}
.navbar {
background-color:#f7f7f7 !important;
padding-bottom:10px;
border-bottom:1px solid #E6E7E8;
-webkit-box-shadow: 0px 1px 2px rgba(159,159,155,0.4)
}
#toggle {
background-color:none;
color:black;
}
.nav-item {
text-align: right;
padding:0px 10px 0px 10px
}
.nav-link {
text-align:left;
font-size:14px;
color:#0c2d1c !important;
}
#navbarNav {
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle#3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet">
<body>
<!-- Navigation -->
<nav id="navbar" class="navbar navbar-expand-lg navbar-light bg-dark sticky-top">
<a class="navbar-brand" href="#">
<div class="logo_subheader">
Land Use and Environment Lab
<br>
</div>
<div class="logo_header">
GLUE
<br>
</div>
</a>
<button id="toggle" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-left" id="navbarNav">
<ul id = "navPills" class=" nav-pills navbar-nav ml-auto">
<li>
<a href="index.html" class="btn btn-s-md btn-white m-b active">ABOUT
</a>
</li>
<li>
<a href="people.html" class="btn btn-s-md btn-white m-b">
PEOPLE
</a>
</li>
<li>
<a href="research.html" class="btn btn-s-md btn-white m-b">RESEARCH
</a>
</li>
<li>
<a href="publications.html" class="btn btn-s-md btn-white m-b">PUBLICATIONS
</a>
</li>
<li>
<a href="media.html" class="btn btn-s-md btn-white m-b">
MEDIA
</a>
</li>
<li>
<a href="teaching.html" class="btn btn-s-md btn-white m-b">
TEACHING
</a>
</li>
<li>
<a href="opportunities.html" class="btn btn-s-md btn-white m-b">
OPPORTUNITIES
</a>
</li>
</ul>
</div>
</nav>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle#3.6.1/js/bootstrap4-toggle.min.js"></script>
Based on Bootstrap 4 docs for Navbar example (https://getbootstrap.com/docs/4.0/components/navbar/), I would erase your li classes as they seem to cause the overlap with the edge of the viewport to happen.
If you put these classes on your ul element you will have the same lg collapse and styling of buttons. See code below for the changes I am referring to.
<nav id="navbar" class="navbar navbar-expand-lg navbar-light bg-dark sticky-top">
<a class="navbar-brand" href="#">
<div class="logo_subheader">
Land Use and Environment Lab
<br>
</div>
<div class="logo_header">
GLUE
<br>
</div>
</a>
<button id="toggle" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-left" id="navbarNav">
<ul id="navPills" class=" nav-pills navbar-nav ml-auto btn btn-s-md btn-white m-b">
<li>
<a href="index.html">ABOUT
</a>
</li>
<li>
<a href="people.html">
PEOPLE
</a>
</li>
<li>
<a href="research.html">RESEARCH
</a>
</li>
<li>
<a href="publications.html">PUBLICATIONS
</a>
</li>
<li>
<a href="media.html">
MEDIA
</a>
</li>
<li>
<a href="teaching.html">
TEACHING
</a>
</li>
<li>
<a href="opportunities.html">
OPPORTUNITIES
</a>
</li>
</ul>
</div>
Related
I'm newbie. I tried to move nav to the right and logo must stay in left side.
I dont why I tried all ways. i am using bootstrap 4.7 and 4.7 nav bar code in html. I tried all code. e.g: ms-auto, ml-auto, justify-content-end in ul class, but still cann't success.
Help me to sort out this problem. Please check attached .
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<!-- bootstrap -->
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
<!-- custom css -->
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<header>
<div class="container-fluid grey">
<div class="row">
<div class="container pink">
<div class="row">
<div class="head-top pt-2">
<div class="col-md-6 pt-5">
<div class="logo">
<img src="assets/images/logo.png" class="logo">
</div>
</div>
<div class="col-md-6 green">
<nav class="navbar navbar-expand-lg">
<!-- <a class="navbar-brand" href="#"><img src="assets/images/logo.png" class="logo"></a> -->
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</nav>
<!-- <img src="assets/images/menu.png" class="menu-icon"> -->
</div>
<!-- head-top -->
</div>
</div>
<!-- container -->
</div>
</div>
<!-- container-fluid -->
</div>
</header>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" ></script>
</body>
</html>
*{
margin: 0;
padding: 0;
font-family: sans-serif;
}
.logo{
width: 50px;
}
.menu-icon{
width: 30px;
}
.grey{
background-color: #8B8B8B;
}
.pink{
background-color: #EC8CBE;
}
.green{
background-color: #65D790;
}
It’s not clear what you were trying to do with the rows and columns for your navbar, so I started with a clean copy of Bootstrap’s 4.6.0 navbar.
If you want the menu items to be on the left, change the margin class on the unordered list from mr-auto to ml-auto.
And it’s best to put the active class on the list item, not the link.
.bg-pink {
background-color: #EC8CBE;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-pink">
<div class="container-lg">
<a class="navbar-brand" href="#"><img src="https://via.placeholder.com/60x40.png" class="logo"></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="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
I used a container-lg for the nav content so the logo and menu won't continue to spread out on larger screens.
As I understand it, you want the menu all the way to the right - next to the logo, but sticking to the right side? Right?
Well, I achieved this by putting the following css into the style.css file:
.pt-2 {
display: flex;
}
.navbar-expand-lg {
justify-content: flex-end;
}
The menu will be a bit above the height level of the logo, but you can play around with that if you want. Either raise the logo a little, or push down the menu.
If you wanna push down the menu using margin, i found that
margin-top: 42px;
was the right amount of pixels.
Hope it helped.
I've created a Bootstrap navigation bar and below that, I have made a container in which I will show some description as shown in the image below. I've used the latest version of the bootstrap.
Now, the alignment of the description text should match that of the left-most item of the navigation bar, but what I'm getting from my code is shown in the below image.
Here you can clearly see that the alignment of the left most navbar item i.e. CP-210-1 button doesn't match with the description text starting with This is....
Here is my code.
.model-family-navigation-bar {
background-color: #00853e;
}
.navigation-bar-content {
color: white;
font-size: 120%;
}
.dropdown-menu>div>a:hover {
background: #8dc4d4;
}
.dropdown-menu>div:nth-child(odd) {
background: #d9d9d9;
}
.dropdown-menu>div:nth-child(even) {
background: #f9fffe;
}
.border-section {
border: 2px solid #D0D0D0;
margin-top: 20px;
}
.greenTitle {
color: green;
font-weight: bold;
}
a:link {
font-size: 120%;
background-color: transparent;
text-decoration: underline;
}
a:visited {
color: white;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>App5</title>
<base href="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="container model-family-navigation-bar" style="min-height: 32px">
<nav class="navbar navbar-expand-sm navbar-dark model-family-navigation-bar" style="min-height: 32px">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<!-- <div class="col-sm-auto"> -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle navigation-bar-content text-white" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="text-decoration:none">
<span id="selected" style="text-decoration:none;font-weight:bold">CP-210-1</span>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown" style="background-color:#00853e">
<h1 class="dropdown-header text-white">Model Family</h1>
<div>
<!-- <div class="dropdown-divider"></div> -->
<a class="dropdown-item text-black" (click)="showList()">CP210-1</a>
<a class="dropdown-item text-black" (click)="showList()">CP210-2</a>
<a class="dropdown-item text-black" (click)="showList()">CP210-3</a>
<a class="dropdown-item text-black" (click)="showList()">CP210-4</a>
</div>
</div>
</li>
<!-- </div> -->
<!-- <div class="col-sm-auto"> -->
<li class="nav-item">
<span class="navigation-bar-content navbar-text text-white ml-4">Proportional Directional Valve</span>
</li>
<!-- </div> -->
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link text-white" href="https://www.google.com/" style="font-size:13px">Data Sheet</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="container border-section mt-2">
<div class="row" style="min-height:80px;">
<p class="ml-4 mt-1" style="font-size:20px">This is a proportional, 3 position 4 way, directional control valve</p>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
</body>
</html>
I'm not finding any way to align the left-most item of the navigation bar to the description text. Although I have an alternative to add the left padding to the left item but that's not what I'm supposed to do. So, can anyone help me out on how to align the text with the button item? Also, I'm not finding any way to decrease the height of the green colored navigation bar container equal to that as given in the first image.
If I decrease the height then the responsive behavior is not there on decreasing the browser width. So, can anyone suggest something for that also?
As a quick fix you could try setting the left padding of the "nav-link" anchor to 0.
Something like this:
.navbar-nav .nav-link.dropdown-toggle {
padding-left: 0px;
}
Or you could add a custom class to that element and use that in your selector.
I created a drop down sub menu in bootstrap 3, in which the links are working (It goes to respective pages). But, While i shrink the browser to look as if like a mobile view, the links of the sub menus are not working(It goes to different page while the menu is clicked).
The following image depicts the issue with my issue.
From the above image, if i move the curser to click the 'tamil newsletter', it is moving to 'gallery' page.
I feel there is a simple solution for this issue and i do not know where i am wrong.
The following is my code:-
<nav id="navbar-section" class="navbar navbar-default navbar-static-top navbar-sticky" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar-spy" class="collapse navbar-collapse navbar-responsive-collapse">
<ul class="nav navbar-nav pull-right">
<li>
About Us
</li>
<li>
Support Us
</li>
<li class="active dropdown">Newsletter
<ul class="nav navbar-nav pull-right dropdown-menu" role="menu">
<li>Tamil Newsletter</li>
<li>English Newsletter</li>
</ul>
</li>
<li>
<span>Gallery</span>
</li>
<li>
<span>Contact Us</span>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav id="navbar-section" class="navbar navbar-default navbar-static-top navbar-sticky" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar-spy" class="collapse navbar-collapse navbar-responsive-collapse">
<ul class="nav navbar-nav pull-right">
<li>
About Us
</li>
<li>
Support Us
</li>
<li class="active dropdown">Newsletter
<ul class="nav navbar-nav pull-right dropdown-menu" role="menu">
<li>Tamil Newsletter</li>
<li>English Newsletter</li>
</ul>
</li>
<li>
<span>Gallery</span>
</li>
<li>
<span>Contact Us</span>
</li>
</ul>
</div>
</div>
</nav>
You are using bootstrap nav already... The pull-right which you added to dropdown-menu is creating the problem....
So as a quick patch, add this to you css.. add more specificity if there are other dropdown-menus on the page.
#media(max-width: 768px){
#navbar-spy > .navbar-nav{
border-left: 1px solid #ddd;
margin: 0 -15px;
width: 170px;
}
#navbar-spy .dropdown-menu.pull-right {
float: none !important;
}
#navbar-spy .dropdown-menu.navbar-nav{
margin:0;
font-size: 13px;
padding: 0;
}
#navbar-spy .navbar-nav .open .dropdown-menu.navbar-nav > li > a{
padding:2px 10px 2px 20px;
border-bottom: 1px solid #ddd;
}
}
I'm trying to create a typical user panel with thymeleaf layouts.
As you can see on the expected result picture below, the layout is composed by a header and left menu. The contents chosen from the menu are displayed in the child section:
However, the result I get is this one:
This is my "fixed parts" code where the header is the "header" fragment and the menu is the "menu" fragment:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8"/>
<title>Thymeleaf Layout</title>
<link href="bootstrap-3.3.6-dist/css/bootstrap.css" rel="stylesheet"/>
<link href="font-awesome-4.5.0/css/font-awesome.css" rel="stylesheet"/>
<link href="panel/css/custom.css" rel="stylesheet"/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'/>
</head>
<body>
<div id="wrapper">
<nav class="navbar navbar-default navbar-cls-top " role="navigation" style="margin-bottom: 0" th:fragment="header">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-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="index.html">UserName</a>
</div>
<div style="color: white;
padding: 15px 50px 5px 50px;
float: right;
font-size: 16px;"> Last access : 30 May 2014 <a href="#"
class="btn btn-danger square-btn-adjust">Logout</a></div>
</nav>
<nav class="navbar-default navbar-side" role="navigation" th:fragment="menu">
<div class="sidebar-collapse">
<ul class="nav" id="main-menu">
<li>
<i class="fa fa-university fa-2x"></i><label th:text="#{companyBasicData}" style="font-weight: normal"></label><span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
<label th:text="#{companies}" style="font-weight: normal"/>
</li>
<li>
<label th:text="#{employees}" style="font-weight: normal"/>
</li>
</ul>
</li>
<li>
<i class="fa fa-balance-scale fa-2x"></i> <label th:text="#{billing}" style="font-weight: normal"/>
</li>
<li>
<i class="fa fa-money fa-2x"></i><label th:text="#{payrolls}" style="font-weight: normal"/>
</li>
</ul>
</div>
</nav>
</div>
<script src="panel/js/jquery-1.10.2.js"></script>
<script src="bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
<script src="panel/js/custom.js"></script>
</body>
</html>
This is my "child" page where I import both, the header and the menu fragments:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8"/>
<title>Thymeleaf Layout</title>
<link href="bootstrap-3.3.6-dist/css/bootstrap.css" rel="stylesheet"/>
<link href="font-awesome-4.5.0/css/font-awesome.css" rel="stylesheet"/>
<link href="panel/css/custom.css" rel="stylesheet"/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'/>
</head>
<body onload="test()">
<div th:replace="fragments/panel :: header">
</div>
<div th:replace="fragments/panel :: menu">
</div>
<div>
my page content
</div>
<script>
function test() {
alert("TEST");
}
</script>
<script src="panel/js/jquery-1.10.2.js"></script>
<script src="bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
<script src="panel/js/custom.js"></script>
</body>
</html>
You can find the gitHub repository with the sample code at this link:
https://github.com/MichaelKnight/thymeleafLayout
Bootstrap Dashboard
This Bootstrap Dashboard example showcases how to achieve a three component page.
Top Navigation Bar
Sidebar Navigation Menu
Content Area
The Top Navigation bar is a root component inside your <body>. The Sidebar and Content Area are <div class="col-xs-*"> columns located inside a <div class="row"> row which resides in a <div class="container-fluid"> container.
Visit the link above and view-source to see the structure of the HTML. Fundamentally this is a CSS problem, as your current GitHub project contains all of the elements, they are just positioned behind each other out of view. Adding the appropriate Bootstrap classes will resolve the problem.
The Thymeleaf fragments are being included properly.
The layout sample is uploaded to my gitHub repository which you can find at the end of the issue description.
The top bar:
<div layout:fragment="header">
<nav class="navbar navbar-default navbar-cls-top " role="navigation" style="margin-bottom: 0" th:fragment="header">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-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="index.html">UserName</a>
</div>
<div style="color: white;
padding: 15px 50px 5px 50px;
float: right;
font-size: 16px;"> Last access : 30 May 2014 <a href="#"
class="btn btn-danger square-btn-adjust">Logout</a></div>
</nav>
</div>
The side menu:
<div layout:fragment="sidebar">
<nav class="navbar-default navbar-side" role="navigation">
<div class="sidebar-collapse">
<ul class="nav" id="main-menu">
<li>
<a href="#"><i class="fa fa-university fa-2x"></i><label th:text="#{companyBasicData}"
style="font-weight: normal"></label><span
class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li>
<label th:text="#{companies}" style="font-weight: normal"/>
</li>
<li>
<label th:text="#{employees}" style="font-weight: normal"/>
</li>
</ul>
</li>
<li>
<a href="/billing"><i class="fa fa-balance-scale fa-2x"></i> <label th:text="#{billing}"
style="font-weight: normal"/></a>
</li>
<li>
<a href="#"><i class="fa fa-money fa-2x"></i><label th:text="#{payrolls}"
style="font-weight: normal"/></a>
</li>
</ul>
</div>
</nav>
</div>
Then you have to create the layout page:
<div layout:fragment="sidebar">
<nav class="navbar-default navbar-side" role="navigation">
<div class="sidebar-collapse">
<ul class="nav" id="main-menu">
<li>
<a href="#"><i class="fa fa-university fa-2x"></i><label th:text="#{companyBasicData}"
style="font-weight: normal"></label><span
class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li>
<label th:text="#{companies}" style="font-weight: normal"/>
</li>
<li>
<label th:text="#{employees}" style="font-weight: normal"/>
</li>
</ul>
</li>
<li>
<a href="/billing"><i class="fa fa-balance-scale fa-2x"></i> <label th:text="#{billing}"
style="font-weight: normal"/></a>
</li>
<li>
<a href="#"><i class="fa fa-money fa-2x"></i><label th:text="#{payrolls}"
style="font-weight: normal"/></a>
</li>
</ul>
</div>
</nav>
</div>
I am having trouble getting bootstrap 3's navabar to be responsive on a mobile device. The navbar continues to span further than the mobile display, and I cannot figure out what I did wrong.
The Code:
(HTML)
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigationbar">
<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 img-responsive" href="index.html">
<img src="img/logo.png" width="320" height="85" alt="">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navigationbar">
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
<li>
Getting Started
</li>
<li class="dropdown">
Products <b class="caret"></b>
<ul class="dropdown-menu">
<li>
Brain Seed™
</li>
</ul>
</li>
<li>
About Us
</li>
<li>
FAQ
</li>
<li>
Contact Us
</li>
<li>
<button type="button pull-right" class="btn btn-success">ORDER NOW</button>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
The Code: (CSS)
.navbar-fixed-top .nav {
padding: 20px 0;
}
.navbar-fixed-top .navbar-brand {
padding: 0 15px;
}
.page-content {
padding-top: 40px;
}
.img-center {
display: block;
margin: 0 auto;
}
.navbar .brand {
max-height: 40px;
max-width: 30%;
overflow: visible;
padding-top: 0;
padding-bottom: 0;
}
I notice you in your html code, you typed fixed height and width, which cancels the img-responsive class.
Start by removing that and go from there...enter link description here