I have got a centered logo in my navbar and three menu categories on the side,when i reduce my resolution some categories start to disappear and when i reduce the resolution for navbar collapse things then get really messed up,the whole collapse menu is shown behind the main slider i have got.This is my code.
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="height:90px;">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<div class="row">
<div class="col-md-4">
<ul class="nav navbar-nav ">
<li class="active menu-item">
<a class="menu-link" href="#">Home</a>
</li>
<li class="menu-item">
<a class="menu-link" href="#">About us</a>
</li>
<li class="menu-item">
<a class="menu-link" href="#">Events</a>
</li>
</ul>
</div>
<div class="col-md-4">
<img class="img-responsive center-block" src="images/Night-club.png" title="Night-club logo" alt="Night-club logo">
</div>
<div class="col-md-4">
<ul class="nav navbar-nav ">
<li class="menu-item">
<a class="menu-link" href="#">Gallery</a>
</li>
<li class="menu-item">
<a class="menu-link" href="#">Reservation</a>
</li>
<li class="menu-item">
<a class="menu-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<div class="main-slider-simple">
<ul class="img-slider">
<li>
<img class="img-responsive" src="images/main-img.jpg" title="Night club " alt="Night club " />
</li>
<li>
<img class="img-responsive" src="images/main-img2.jpg" title="Night club " alt="Night club " />
</li>
<li>
<img class="img-responsive" src="images/main-img3.jpg" title="Night club " alt="Night club " />
</li>
</ul>
<!-- Glavni slider -->
</div>
And here is css for the menu links i have set up...
.menu-item{
margin-top:50px;
margin-left:30px;
margin-right:20px;
font-size:30px;
}
How can i accomplish normal responsivness?
Here is the jsfiddle that kinda explains my situation.
http://jsfiddle.net/cELuF/
I've changed the css for the div
.col-md-4
http://jsfiddle.net/cELuF/2/
You will be able to see what i've added in the CSS box.
Related
I'm using a colorlib template called faithful: https://colorlib.com/wp/template/faithful/
Basically I changed the css and the navbar to a horizontal one, the problem is when I view it in mobile, it doesn't work
This is what I did to change the navbar to a horizontal one
<div class="site-navbar-wrap js-site-navbar bg-white">
<div class="container">
<div class="site-navbar bg-light">
<div class="py-1">
<div class="row align-items-center">
<div class="col-2">
<a class="d-block" href="index.html" rel="home"><img class="d-block" src="images/company_logo.png" alt="logo"></a>
</div>
<div class="col-10">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<ul class="navbar-default" id="menu">
<li class="active">
Home
</li>
<a class="dropdown-toggle fa" data-toggle="dropdown" href="about.html" >About Us<span></span></a>
<ul class="dropdown-menu">
<li>Our Company</li>
<li>Team</li>
<li>Goals</li>
<li>Location</li>
</ul>
<li>Products</li>
</li>
<li>Merchandise</li>
<li>FAQs</li>
<li>Contact Us</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
I want the navbar to work on mobile (showing a button on the right)
I tried everything I could but it still doesn't work and I've already finished the design of the website, I just really need to change the navbar.
<nav class="navbar navbar-expand-lg navbar-dark primary-color">
<!-- Collapse button -->
<button class="navbar-toggler float-xs-right" type="button" data-toggle="collapse" data-target="#basicExampleNav"
aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="basicExampleNav">
<!-- Links -->
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Our company</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">goals</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">location</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">merchandise</a>
</li>
</ul>
</div>
</nav>
you can modify and use this
In bootstrap I want to create a page header which consists of a static header, a navbar in a second row and a profile picture to the right, like this:
The profile picture should be of fixed size, the title and nav bars should have the same size each and should fill the screen width.
Problem is, I got no clue how to achieve this in css, especially sind it needs to embed a bootstrap navbar. My only idea would be an old-fashioned 2x2 table where the picture spans two rows, but tables are not meant for layout problems, so sure there must be some better way in css?
To show full effect Watch full-screen view.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<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>
<div class="">
<div class="row">
<div class="col-md-11">
<nav class="navbar navbar-default navbar-fixed-top" style="border-radius: 5px 5px 0px 0px; border-bottom: none; border-right: 1px solid #e7e7e7; width: 91.5%">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
</div>
<!-- /.container-fluid -->
</nav>
<nav class="navbar navbar-default" style="margin-top: 50px; border-radius: 0px 0px 5px 5px; border-top: none">
<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>
</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 >
<a href="#">Link
<span class="sr-only">(current)</span>
</a>
</li>
<li>
Link
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
Action
</li>
<li>
Another action
</li>
<li>
Something else here
</li>
<li role="separator" class="divider"></li>
<li>
Separated link
</li>
<li role="separator" class="divider"></li>
<li>
One more separated link
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>
Link
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
Action
</li>
<li>
Another action
</li>
<li>
Something else here
</li>
<li role="separator" class="divider"></li>
<li>
Separated link
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div> <div class="col-md-1">
<div style="background-color: #f0f0f0; margin-left: -30px; padding-left: 10px; position: fixed">
<img src="https://cdn4.iconfinder.com/data/icons/dragon/512/User.png" alt="" class="" style="width:100px; margin-left: 10px ">
</div>
</div>
</div>
<!--/.row-->
<div style="height: 100vh;"></div>
</div>
<!--/.container-fluid-->
Use bootstrat 3's media styling
In this snippet I used only 1 embedded BS Nav and added a border color to delineate the media objects
ALSO - Bootstrap navs are responsive so when you run the snippet switch to expanded view
.media {
border: 1px solid gray;
}
.media, .media-body {
overflow: visible !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-sm-offset-2 col-sm-8">
<div class="media">
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
<div>
<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="#">Brand</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">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
</div>
<div class="media-right">
<a href="#">
<img class="media-object" src="http://via.placeholder.com/80x80" alt="Portrait">
</a>
</div>
</div>
<div class="media">
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
<nav>Nav</nav>
</div>
<div class="media-right">
<a href="#">
<img class="media-object" src="http://via.placeholder.com/80x80" alt="Portrait">
</a>
</div>
</div>
<div class="media">
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
<nav>Nav</nav>
</div>
<div class="media-right">
<a href="#">
<img class="media-object" src="http://via.placeholder.com/80x80" alt="Portrait">
</a>
</div>
</div>
</div>
</div>
.navbar.navbar-expand-lg.navbar-light.bg-light{
width:1920px;
background-color:#eee;
height:50px;
}
footer{
background-color:grey;
}
#media screen and (min-width:320px){
.navbar.navbar-expand-lg.navbar-light.bg-light{
width:100%;
}
}
#media screen and (min-width:985px){
#tog{
height:50px;
}
}
<div class="container-fluid">
<div class="row">
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="tog" role="navigation">
<div class="navbar-header">
<a id="x" class="navbar-brand" href="http://disputebills.com">
<img style="padding-bottom:75px; " id="image;" src="assets/logo.png" alt=" x">MANAGEMENT SYSTEM
</a>
</div>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon" id="but"></span>
</button>
<div class="collapse navbar-collapse justify-content-between" id="collapsibleNavbar">
<div class="col-2"></div>
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" routerLink="/table">Details
</a>
</li>
<li class="nav-item active">
<a class="nav-link" routerLink="/assigned-employees">Employees</a>
</li>
<li class="nav-item active ">
<a class="nav-link" routerLink="/bug-reporting">Report</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="container-fluid">
<div class="row">
<footer id="footer" role="contentinfo">
<div class="container-fluid">
<div class="row footer-list-row">
<div class="col-sm-6">
<div class="row">
<div class="col-xs-6" id="com">
<h3>Company</h3>
<ul>
<li>
<a href=''>About</a>
</li>
<li>
<a href=''>News</a>
</li>
<li>
<a href=''>Careers</a>
</li>
</ul>
</div>
<div class="col-xs-6" id="sol">
<h3>Solutions</h3>
<ul>
<li>
<a href=''>Applications</a>
</li>
<li>
<a href=''>Planning</a>
</li>
<li>
<a href=''>Service</a>
</li>
<li>
<a href=''>Management</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-xs-6" id="part">
<h3>Part</h3>
<ul>
<li>
<a href=''>Partner</a>
</li>
<li>
<a href=''>Partner</a>
</li>
<li>
<a href=''>Login</a>
</li>
</ul>
</div>
<div class="col-xs-6" id="contact">
<h3>Contact Us</h3>
<ul>
<li>
<a href=''>Contact Us</a>
</li>
<li>
<a href=''>Addresses</a>
</li>
<li>
<a href=''>Feedback</a>
</li>
<li>
<a href=''>Login</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</footer>
</div>
</div>
I have implemented bootstrap 4 navigation bar inside my web application.Since it is little bit of tall than I expected I needed to customize its height in to 50px. Soon after I did the customization, mobile view stated to show a malicious behavior. when I try to expand the menu by clicking the "List Icon" it expands the list underneath of other DIV s like follow (Like when it has z index -1)
List View
This is the html code I used for navigation bar
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="tog" role="navigation" style="width:1920px; height:50px;">
<div class="navbar-header">
<a id="x" class="navbar-brand" href="http://disputebills.com">
<img style="padding-bottom:75px; " id="image;" src="assets/logo.png" alt="Dispute Bills">ATTENDENCE MANAGEMENT SYSTEM
</a>
</div>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon" id="but"></span>
</button>
<div class="collapse navbar-collapse justify-content-between" id="collapsibleNavbar">
<div class="col-2"></div>
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" routerLink="/table">My Details
</a>
</li>
<li class="nav-item active">
<a class="nav-link" routerLink="/assigned-employees">Assigned Employees List</a>
</li>
<li class="nav-item active ">
<a class="nav-link" routerLink="/bug-reporting">Report Bugs</a>
</li>
</ul>
</div>
</nav>
I have tried by changing the z-index. But it didn't work for me. any clue on this please
I have this issue when the viewport switches to a mobile version
using bootstrap v3
when the navbar switches to the mobile version of itself , the 2nd and the 3rd element come on the same line , because they have a dropdown class under them.
as shown in the picture. img1 img2
if the drowpdown class isnt put then the elements show themselves properly
any help here?
<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="index.html">
<img class="img-responsive" src="images/logo/logo.png" alt="Deccan Airsports Logo">
</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="scroll">
Home
</li>
<li class="scroll dropdown">
Hot Air Balloon <span class="caret hidden-sm hidden-xs"> </span>
<div class="dropdown-content hidden-sm hidden-xs">
Book A Ride
Membership
FAQs
</div>
</li>
<li class="scroll dropdown">
Services<span class="caret hidden-sm hidden-xs"></span>
<div class="dropdown-content hidden-sm hidden-xs">
Gliders
Sky-Diving
Drones
Hang-Gliders
</div>
</li>
<li class="scroll">Contact</li>
<li><a class="scroll" href="about.html">About</a></li>
<li><a class="scroll" href="faq.html">FAQs</a></li>
<li class="scroll dropdown">Events<span class="caret "></span>
<div class="dropdown-content hidden-sm hidden-xs">
News & Press
Branding
Advertisement
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</header>
The issue might be with your "dropdown" class - make sure it doesn't have display:inline.
I do apologize but I am a beginner and I cannot figure out how to position my logo in the navbar and make everything line up correctly.
I cannot figure out how to make my logo go from this to this one
thank you for your help
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<a class="brand" href="easychip.html">
<img src="images/images/chipfixx.png">
</a>
<a href="/" id="logo">
</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home
</li>
<li>How it Works
</li>
<li>Order Now
</li>
<li>About Us
</li>
<li class="dropdown">
<ul class="dropdown-menu">
Social Media <b class = "caret"></b>
<ul class="dropdown-menu">
<li>Twitter
</li>
<li>Facebook
</li>
<li>Google+
</li </div>
</ul>
</ul>
</div>
</div>
</div>
Try changing this:
<a class="brand" href="easychip.html">
<img src="images/images/chipfixx.png">
</a>
To this:
<a class="navbar-brand" href="easychip.html">
<img src="images/images/chipfixx.png">
</a>
I looked at the source code of my own bootstrap website and I'm pretty sure it should work.