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>
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
I have made a simple navbar with bootstrap,
now how to make navbar dropdowns to such like the photo added?
having triangular edge marked in the red circle.
I have also tried this example but not worked here :'(
My code is given here:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.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="#">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>
</ul>
<ul class="nav navbar-nav navbar-right">
<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>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
</html>
Live Demo: https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_dropdown-menu&stacked=h
Code for dropdown
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.dropdown-menu:before {
position: absolute;
top: -7px;
left: 9px;
display: inline-block;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-left: 7px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
content: '';
}
.dropdown-menu:after {
position: absolute;
top: -6px;
left: 10px;
display: inline-block;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
border-left: 6px solid transparent;
content: '';
}
</style>
</head>
<body>
<div class="container">
<h2>Dropdowns</h2>
<p>The .divider class is used to separate links inside the dropdown menu with a thin horizontal line:</p>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li class="divider"></li>
<li>About Us</li>
</ul>
</div>
</div>
</body>
</html>
my navbar submenu goes like this when i go to mobile screen
this is what i want to be happen to my navbar submenu when i use mobile screen.
here is the code i used. someone tries to explain to me
.navbar-toggle {
z-index:3;
}
.navbar-nav {
float:none;
display: block;
text-align: center;
}
.navbar-nav > li {
display: inline-block;
float:none;
}
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#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>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Sauce</li>
<li class="dropdown">
Syrup <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</li>
<li>Frappe</li>
<li>Accessories</li>
<li>Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div>
You can do this in this way--
Working Example
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
#dropdown-menu {
position: absolute;
background-color: white;
border: 2px;
}
.navbar-nav {
float:none;
display: block;
text-align: center;
}
.navbar-nav > li {
display: inline-block;
float:left;
}
</style>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<!-- Collect the nav links, forms, and other content for toggling -->
<ul class="nav navbar-nav">
<div class="row">
<div class="col-xs-2">
<li>Home</li>
</div>
<div class="col-xs-2">
<li>Sauce</li>
</div>
<div class="col-xs-2">
<li class="dropdown">
Syrup <b class="caret"></b>
<ul id="dropdown-menu" class="dropdown-menu">
<li >Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</li>
</div>
<div class="col-xs-2">
<li style="float: right;">Frappe</li>
</div>
<div class="col-xs-2">
<li style="float: right;">Accessories</li>
</div>
<div class="col-xs-2">
<li style="float: right;">Contact</li>
</div>
</div>
</ul>
<!-- /.navbar-collapse -->
</nav>
</div>
</body>
</html>
Hope this helps!
I am trying to create a header for my website. I want to have my logo at the top left corner and my nav bar at the top right corner of the window. My issue is that the nav bar is not aligned flush with the center of my logo. Here's the goods:
#logoHeader {
float: left;
vertical-align: middle;
}
ul {
list-style: none;
display: inline block;
vertical-align: middle;
}
li {
float: right;
padding: 10px;
font-size: 22pt;
display: inline-block;
}
.header .navContainer {
height: 131px;
vertical-align: middle;
}
<!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/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link type= "text/css" rel="stylesheet" href="all.css"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type = "text/javascript" src = "index.js"></script>
<title>JM</title>
</head>
<body>
<div class ="container">
<div class="row">
<div class="col-md-4 header">
<img id = "logoHeader" src="file:///Users/Jon/Desktop/JM.COM/images/bigJM.png"/>
</div>
<div class="cold-md-8 navContainer">
<ul class = "navBar">
<li>Home</li>
<li>Blog</li>
<li>Publications</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Follow Bootstraps Rules
http://getbootstrap.com/components/#navbar
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</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="#">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 navbar-right">
<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>
<body>
</html>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
In your bootstrap.min.css change margin-top and margin-bottom to 0px for ol and ul selectors
Example
ol, ul {
margin-top: 0px;
margin-bottom: 0px;
}
Also in your css codes in your question padding is also one of the issue. Setting a padding of 10px will result in top, bottom, left and right additional space.
change it to
li {
float: right;
/*padding: 10px;*/
padding-left: 10px;
padding-right: 10px;
font-size: 22pt;
display: inline-block;
}
I'm hand-coding my first website, and it's been a fun adventure so far, but I've run into a css glitch with the navigation menu. Here's my website-in-progress. On my 15" laptop, when I initially load the site, the nav bar extends to the full-width of the container (80% width of the screen) as I expect it to. However, if I zoom the webpage, or view it through different resolutions through screenfly, the nav bar extends past the container and also the header image becomes short. Can anyone help me figure out why this is? Below is the css, then the html
*{ margin: 0 auto;}
body {
background:black;
margin: 0 auto;
font-family:georgia, times,serif;
}
#outer-content-wrapper{
position:relative;
height:100%;
width:80%;
margin:0 auto;
}
#navwrap{
margin:0;
height:60px;
width:100%;
}
#nav{
position:relative;
background:black;
height:60px;
width:100%;
border-top-style:dashed;
border-bottom-style:dashed;
border-width:1px;
border-color:#696969;
z-index:9000;
}`
<div id="outer-content-wrapper">
<div id="header">
<div id="greenlight"></div>
</div>
<div id="navwrap">
<div id="nav">
<div id="logo"></div>
<div class="menu">
<div class="pagesmenu">
<ul>
<li>bio</li>
<li>listen</li>
<li>contact</li>
<li>blog </li>
</ul>
</div>
Peace
use bootstrap instead of plain css. Bootstraps helps to work your site as per screen resoultion http://getbootstrap.com/. use my html code for help
HTML:
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>MENU</title>
<link href="bootstrap.css" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="custom.css" />
<link type="text/css" rel="stylesheet" href="css/media.css" />
<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<script src= "respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="application.js"></script>
</head>
<body>
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<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">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div>
</body>
</html>
Your complete site will pe resposive and can also work on mobile
I have a website I'm trying to design and I have a general layout page where everything will be placed i.e content from other pages I've made, I ran into a problem where my content overflowed and no scrollbar appeared; I looked around and tried a couple of ways to resize my content but none of them worked out so I settled for a temporary fix and made the window size static, can anyone help me with resizing my page based on the screen it's running on. I'm using webmatrix and there will be some C# code in these pages so the extension is cshtml. I am also very new to web development so sorry if my code is messy.
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<link rel="stylesheet" type="text/css" href="/Shared/css/bootstrap.css" />
<style type="text/css">
.body
{
padding-top: 60px;
padding-bottom: 40px;
}
.renderBody {
height: 462px;
overflow: auto;
padding-top: 60px;
padding-left: 440px;
margin: initial;
}
#login{
padding-right: 0px;
}
</style>
<link rel="stylesheet" type="text/css" href="/Shared/css/bootstrap-responsive.css"/>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/latest/js/bootstrap.min.js"></script>
<script src="/downloads/twitter-bootstrap-hover-dropdown/twitter-bootstrap-hover-dropdown.js?view=1"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="navContainer">
<img src="/Shared/Images/Logo.png" alt="LogoImage"></img>
<form class="navbar-form pull-right">
<ul class="breadcrumb" id="login">
<li> Login
<span class="divider"> /
Register</span></li>
</ul>
</form>
</div>
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="http://www.facebook.com">Some Information</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">More Information</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 class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li class="active">Traveling</li>
<li class="active">Moving</li>
<li class="active">Sports</li>
</ul>
<!--<form class="navbar-form pull-right">
<ul class="nav"><li class="active">Register</li></ul>
</form>
</div>-->
</div>
</div>
</div>
<div class="renderBody">
#RenderBody()
</div>
</div>
</body>
</html>
There are a few things you can try layout-wise, before you go down the road of screen measurement in script:
First, be sure to use the viewport meta tag (https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag):
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Next, wrap RenderBody with the bootstrap container class:
<div id="main" class="container">
#RenderSection("featured", required: false)
<section>
#RenderBody()
</section>
</div>
Also, if you're not already familiar with it, you may want to read up on the fluid grid system in bootstrap (http://twitter.github.io/bootstrap/scaffolding.html#fluidGridSystem)
Lastly, if all else fails, you can use the overflow CSS property on your content container:
.renderBody {
overflow-x: scroll;
}