I am trying to expand the links in the side navbar horizontally. I have tried hard by going through the tutorials of bootstrap 4. My code is following.
<li class="active dropright">
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" aria-haspopup="true" class="dropdown-toggle">
<i class="fas fa-home"></i>
Residential
</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
Rami Villa
</li>
<li>
Alpine Metals Jafza
</li>
<li>
Home 3
</li>
</ul>
</li>
The outcome of this code is as following.
.
When I click the residential link it dropdowns as follows.
.
However I actually want something like this.
I have do some modification in your code, and has done the output as your requirement.
HTML
<aside>
<li class="active dropright">
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" aria-haspopup="true" class="dropdown-toggle">
<i class="fas fa-home"></i>
Residential
</a>
<ul class="collapse list-unstyled submenu" id="homeSubmenu">
<li>
Rami Villa
</li>
<li>
Alpine Metals Jafza
</li>
<li>
Home 3
</li>
</ul>
</li>
</aside>
CSS
ul,
li {
list-style: none;
padding: 0;
margin: 0;
}
aside {
width: 100%;
height: 100%;
max-width: 200px;
}
aside .dropright {
position: relative;
background: yellow;
}
aside .dropright a {
padding: 10px;
display: block;
}
aside .dropright .submenu {
position: absolute;
background: black;
left: 100%;
right: auto;
width: 100%;
top: 0;
}
aside .dropright .submenu li a {
color: #fff;
display: block;
}
Here is the codepen link
You need to use .dropdown-menu on your <ul> instead of .collapse
<li class="active dropright">
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" aria-haspopup="true" class="dropdown-toggle">
<i class="fas fa-home"></i>
Residential
</a>
<ul class="list-unstyled dropdown-menu" id="homeSubmenu">
<li>
Rami Villa
</li>
<li>
Alpine Metals Jafza
</li>
<li>
Home 3
</li>
</ul>
</li>
https://jsfiddle.net/chan_omega/a3mgvnk8/
I'm quite new to programming, but why don't you use the example of Bootstrap:
Like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Default dropright button-->
<div class="btn-group dropright">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Residential
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links-->
<a class="dropdown-item" href="#">Rami Villa</a>
<a class="dropdown-item" href="#">Alpine Metals Jafza</a>
<a class="dropdown-item" href="#">Home 3</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
Related
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>
I have written :-
.container-fluid{padding 3% 15%;}
but its only changing padding of Vertical directions to 3% and no change in horizontal padding
#title {
background-color: #ff4c68;
}
.container-fluid {
padding: 3% 15%;
}
h1 {
font-family: 'Montserrat', sans-serif;
font-size: 3rem;
line-height: 1.5;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TinDog</title>
<!-- fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#900&display=swap" rel="stylesheet">
<!-- CSS files -->
<link rel="stylesheet" href="css/styles.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<!-- js file -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
</head>
<body>
<section id="title">
<div class="container-fluid">
<!-- Nav Bar -->
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand ms-2" href="#">tindog</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Link
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarScrollingDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<!-- Title -->
<div class="row">
<div class="col-lg-6">
<h1>Meet new and interesting dogs nearby.</h1>
<button type="button">Download</button>
<button type="button">Download</button>
</div>
<div class="col-lg-6">
<blockquote class="imgur-embed-pub" lang="en" data-id="a/hlTZeUb" data-context="false" ></blockquote><script async src="//s.imgur.com/min/embed.js" charset="utf-8"></script>"
</div>
</div>
</div>
</section>
</body>
</html>
I want to add horizontal padding to 15% to container-fluid class div element so that they come to center of screen.
EDIT :- It looks like bootstrap has also mentioned some padding for .container-fluid in their css so when i disable it using Dev Tools in my browser i get my required padding of 15% horizontally. But is there any way to really solve it?
Try this:
.container-fluid {
padding: 3% 15% !important;
}
This question is actually reproducible. It happened to me when I was following the Tindog tutorial. The other answer works well but there's a better way of doing this. See here.
You can add an id or class to the <body> tag:
<body id="bootstrap-overrides">
and then use that with every element you want to style in the CSS file like this:
#bootstrap-overrides .container-fluid {
padding: 3% 15%;
}
It works with all the elements.
I am a bit stuck trying to place or stack two navigation menus on top of each other, I am using Bootstrap, HTML and CSS.
I think I might need to use the z-index, but not sure exactly how.
I have added the code below and included picture of what I would like to achieve.
Code:
<!<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<nav class="navbar navbar-expand-md bg-white navbar-white">
<a class="navbar-brand" href="#">
<img src="assets/logo2.png"height="84px">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="accessability">
<li class="nav-item">
<a class="contrast">Contrast</a>
</li>
<li class="Font-size">Font size</a>
</li>
<li class="download">Download a brochure</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">New Vehicles</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Nearly New/ Used Vehicles</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Motability</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Aftercare</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>
<br>
<nav class="navbar navbar-inverse bg-primary">
<ul>
<li class="sec-menu">Versa Connect</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="sec-menu">Overview</li>
<li class="sec-menu">Offers</li>
<li class="sec-menu">Models</li>
<li class="sec-menu">Optional Extras</li>
</ul>
</nav>
<section id="cover_image">
<div class="container">
<img src="assets/cover_image.jpg" >
<div class="text-block">
<h1>Versa Connect</h1>
<p>The Ford Torneo Connect is a relaxing and comfortable place to be.
Great to drive, great to sit in, it boasts premium finish, high quality materials
and fuel efficiency without compromising everyday practicality. </p>
<button type="button" class="btn btn-lg btn-primary">Make an enquiry</button>
</div>
</div>
</body>
</html>
CSS
h1{
font-family: roboto;
}
p{
font-family: roboto;
font-size: 18px;
}
li{
font-family: roboto;
font-size: 18px;
display:inline;
padding: 30px;
}
li a{
color: #000;
}
.navbar-right{
float: right !important;
margin-right: -15px;
display: inline;
}
ul.nav navbar-nav navbar-right li a{
display: flex;
}
li.sec-menu a{
color: #fff;
font-family: roboto;
}
.container{
margin: 0;
padding: 0;
}
.text-block {
text-align: center;
position: absolute;
bottom: 10px;
left: 100px;
background-color:rgba(255,255,255,0.66);
color:#000;
width: 380px;
padding:50px;
}
.btn btn-lg btn-primary{
padding-left: 10px;
width: 360px;
}
I would appreciate it if somebody could help me with my coding and show me how or where I should code the z-index in my code.
The z-index property is used for stacking items on top of each other via the z plane (think of a 3-dimensional plane), so that property would not help you here. All you need to do is create each navbar using a separate "nav" or "div" tag, which will put them on separate lines.
You are on the right track, but you have multiple errors in your code that are causing this issue. Your navbar consisting of "Contrast, Font Size, Download a Brochure" have closing anchor tags but not beginning anchor tags. This navbar is also using a class "accessability" that is not defined in your CSS, which is why it's appearing as an unstyled unordered list.
Here is a simple version of what you are looking for:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<nav>
<ul>
<li>Contrast</li>
<li>Font Size</li>
<li>Download a Brochure</li>
</ul>
</nav>
<nav>
<ul>
<li>New Vehicles</li>
<li>Nearly New/Used Vehicles</li>
<li>Motability</li>
<li>Aftercare</li>
<li>Contact Us</li>
</ul>
</nav>
</body>
</html>
This works, you do not need the z-index. You can view it here on codepen https://codepen.io/anon/pen/Rvdgaq
<nav class="navbar navbar-expand-md bg-white navbar-white">
<a class="navbar-brand" href="#">
<img src="assets/logo2.png"height="84px">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="accessability">
<li class="nav-item">
<a class="contrast">Contrast</a>
</li>
<li class="Font-size">Font size</a>
</li>
<li class="download">Download a brochure</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">New Vehicles</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Nearly New/ Used Vehicles</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Motability</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Aftercare</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>
<nav class="navbar navbar-inverse bg-primary">
<ul>
<li class="nav-item sec-menu">Versa Connect</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="nav-item sec-menu">Overview</li>
<li class="nav-item sec-menu">Offers</li>
<li class="nav-item sec-menu">Models</li>
<li class="nav-item sec-menu">Optional Extras</li>
</ul>
</nav>
</div>
</div>
<section id="cover_image">
<div class="container">
<div class="row">
<img src="assets/cover_image.jpg" >
<div class="text-block">
<h1>Versa Connect</h1>
<p>The Ford Torneo Connect is a relaxing and comfortable place to be.
Great to drive, great to sit in, it boasts premium finish, high quality materials
and fuel efficiency without compromising everyday practicality. </p>
<button type="button" class="btn btn-lg btn-primary">Make an enquiry</button>
</div>
</div>
</div>
</section>
A Few things I noticed, 1. You did not close off your section tag so that could be causing issues. And you do not need postion: absolute; on .text-block, take off bottom: 10px;
Make it position relative
I have a problem with hiding some of my content. I am very new to coding, i started with coding for a week ago. Until now i have learned html, the most inportaint css, and how to use bootstrap 4. My problem is I want to hide some content. I have searched around on the web for hours, and the only ting i found useful was the d-none and d-sm-block and all the other hide and show tags. I tried it several places in my code without any luck, so hope anyone can help.
I want the search bar, log in and register button on small screens to disappear, and then a small dropdown menu shows up instead(only on the small screens). In the dropdown menu i want to have the log in an register button. I know i didn't use boopstrap as navbar at the top, but thats beacause I hadn't learn it yet, and i didn't want to change it since I liked the size on the buttons.
Hope anyone can help.
The top of my html code.(The hotpink buttons are bigger in my real code since I have other text in it)
<head>
<title>hello world</title>
<link rel="stylesheet" href="../test_sublime/css/bootstrap.css">
<link href="test1.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<h2><em><u>Header</u></em>.no</h2>
<nav class="headnav">
<ul>
<li class="hotpink"><a class="b_link" href="#">Test</a></li>
<li class="hotpink"><a class="b_link" href="#">Test</a></li>
<li class="hotpink"><a class="b_link" href="#">Test</a></li>
<li class="hotpink"><a class="b_link" href="#">Test</a></li>
<li class="hotpink"><a class="b_link" href="#">Test</a></li>
</ul>
</nav>
<div class="btn-group">
Logg In
Register
<!--This is the search bar I want to hide when the screen is small-->
</div>
<form class="form-inline my-lg sok">
<input class="form-control mr-sm-2 msok" type="search" placeholder="Søk" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0 msok" type="submit">Søk</button>
</form>
<!--I want this dropdown menu to show up when the screen is small-->
<div class="dropdown-menu d-block d-sm-none" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="../test_sublime/logg in.html">Logg Inn</a>
<a class="dropdown-item" href="../test_sublime/registrer.html">Register Deg</a>
<div class="dropdown-divider"></div>
</div>
</header>
...
<footer>
...
<script src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script scr="../test_sublime/jQuery/jquery.js"><\/script>');</script>
<script type="text/javascript" src="../test_sublime/js/test.js"></script>
<script src="test_sublime/js/bootstrap.min.js"></script>
</footer>
</body>
Parts of my css
body {
background: pink;
margin-left: 12px;
margin-right: 12px;
margin-top: 10px;
}
h2 {
display:inline;
background: mediumvioletred;
padding: 20px 40px 7px 40px;
margin: 0px 5px 40px -15px;
border-radius: 4px;
}
ul {
display: inline;
margin: 0px 0px 0px -38px
}
.sok {
display: inline-block;
float: right;
margin-right: 35px;
margin-top: 10px;
}
.msok {
margin-top: 0px;
}
.btn-group {
padding: 0px 10px 0px -10px
display: inline;
float: right;
margin-top: 10px;
}
nav.headnav {
display: inline-block;
}
Is it any ways to fix it with bootstrap, or do i have to use JavaSript or something else?
(Sorry for the colors)
Use a media query in your css
#media (max-width: 767.98px) {
form.sok {
display: none;
}
You can hide the elements based on screen size.
Bootstrap Responsive Break Points
This will solve your problem using navbar class.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="bootstrap.css">
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
</head>
<body>
<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="#">yourbrand</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">Home <span class="sr-only">(current)</span></li>
<li>About</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>
<form class="navbar-form navbar-left">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<span class="btn input-group-addon">Search</span>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<div class="btn-group">
Logg In
Register
</div>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
</html>
I am using bootstrap in my project but when I resize the window my template commix completely.My navbar would explode and some part of my page is not shown and...
Every thing is wrong...
And when I use a mobile to see my website not only the bootstrap is not loaded but also every thing is wrong there too.
I use just the codes in bootstrap site but in their site its working well and in my project its not.
for example I copied this navbar from the site and it has the problem with resizing:
<div class="navbar navbar-inverse" style="position: static;">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-target=".navbar-inverse-collapse" data-toggle="collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Title</a>
<div class="nav-collapse collapse navbar-inverse-collapse">
<ul class="nav">
<li class="active">
Home
</li>
<li>
Link
</li>
<li>
Link
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
Action
</li>
<li>
Another action
</li>
<li>
Something else here
</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>
Separated link
</li>
<li>
One more separated link
</li>
</ul>
</li>
</ul>
<form class="navbar-search pull-left" action="">
<input class="search-query span2" type="text" placeholder="Search">
</form>
<ul class="nav pull-right">
<li>
Link
</li>
<li class="divider-vertical"></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
Action
</li>
<li>
Another action
</li>
<li>
Something else here
</li>
<li class="divider"></li>
<li>
Separated link
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
what should I do to solve this problem?
Edit:
The issue is solved for resizing the window but the problem with mobile is remained...
My _Layout header code is like this:
<
head>
<meta charset="utf-8" />
<style type="text/css">
##media (max-width: 767px) {
.search-query {
display: none;
}
}
##-ms-viewport {
width: device-width;
}
</style>
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<link rel="stylesheet" type="text/css" href="~/Content/bootstrap.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="~/Content/bootstrap-responsive.css" />
<link rel="stylesheet" type="text/css" href="~/Content/mosaic.css" />
<script src="~/Scripts/jquery-1.7.1.js"></script>
<script src="~/Scripts/mosaic.1.0.1.min.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/Site.js"></script>
<script type="text/javascript">
jQuery(function ($) {
$('.bar').mosaic({
animation: 'slide'
});
});
</script>
</head>
I have the codes between <style> tags in my bootstrap-responsive.css too.
Try adding this line in the head section of your html file:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
If that doesn't work you can use media queries, like the following:
#media (max-width: 767px) {
.search-query {
display: none;
}
}
More info about media queries is here: http://twitter.github.io/bootstrap/scaffolding.html#responsive