For some reason no matter what I do my navbar displays menu items horizontally on collapse with my logo in the middle of them! When I used the visible-xs etc it aligns it to the left for some reason when it is visible!
I have tried methods found on other similar overflow questions such as displaying the list items inline-block (despite not wanting to use inline-styles!)
But nothing is working for me!
I know the problem is because I have my logo in the center of my menu items on desktop view, so it isn't a standard menu but there must be a way around this to make my menu items display vertically without the logo in the middle? I am new-ish to this so perhaps I am just being stupid and missing something?
I am using jquery mobile if it makes any difference (could it be this breaking the menu and preventing it from being closed?)
here is what I have and have tried:
HTML for navbar:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, no-index">
<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 -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="favv.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<script type="text/javascript" src="../node_modules/bootstrap/dist/js/bootstrap.js"></script>
<script src="../assets/js/main.js"></script>
<!-- Custom styles for this template -->
<link href="../node_modules/jquery-mobile/mobilestyles.css" rel="stylesheet">
<link href="/Silver-Lining/css/template.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]>
<!--============ Navigation ===============-->
<nav class="navbar navbar-default navbar-fixed-top text-center">
<nav id="navbar-primary" class="navbar" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<div class="top-social">
<a href="tel:+1-303-499-7111"> <i class="fa fa-phone" aria-hidden="true">
</i> 0787000000
</a>
<a href="#">
<i class="fa fa-facebook-official" aria-hidden="true"></i>
</a>
<a href="#">
<i class="fa fa-twitter-square" aria-hidden="true"></i>
</a>
<a href="#">
<i class="fa fa-instagram" aria-hidden="true"></i>
</a>
<a href="#">
<i class="fa fa-linkedin-square" aria-hidden="true"></i>
</a>
</div>
<button type="button" class="navbar-toggle collapsed" 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>
</div>
<div class="collapse navbar-collapse" id="navbar-primary-collapse">
<ul class="nav navbar-nav">
<li>ABOUT</li>
<li>OUR CARS</li>
<li>PRICES</li>
<a class="hidden-sm-down" href="index.php" data-ajax="false"><img src="../assets/images/logo" width="250" alt="Logo"></a>
<li>PACKAGES</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
CSS example to make menu items appear vertically on Collapse:
#media (max-width: 932px) {
#navbar-primary .navbar-nav li a {
float: none;
position: inherit;
display: inline-block !important;
vertical-align: top;
max-height: 300px;
}
}
Css for navbar
// Remove excess borders
.navbar-default {
border-top: none;
border-left: 0;
border-right: none;
margin-top: 0px;
padding-bottom: 10px;
font-family: 'Open Sans Condensed', sans-serif;
margin-bottom: 0;
font-size: 18px;
border-color: transparent;
white-space: normal;
}
.navbar-default .navbar-nav > li {
margin-top: 20px;
}
Any help would be much appreciated, I have been very confused and stuck on this for several days at least and really want to keep the same navbar without having to make it all over again
After much playing with the code I found that
#media screen and (max-width: 768px) {
#navbar-primary .navbar-nav > li {
display: block;
}
}
gave me the result I wanted (vertically stacked menu items on collapse!)
Related
I want to create an horizontal carousel that has a phrase or several words scrolling end to end of the screen in a loop.
What I've tried is duplicating the phrase in two different divs, to avoid the gap in the animation (otherwise, the phrase goes almost away before it starts from the beginning and looks awful).
The problem (even though I've tried to delay the 2nd animation by half the time of the first one for them not to overlap), depending on the device, the text still overlaps.
How can I create such cacrousel (with or without JS) making sure texts don't overlap? https://tucuerpofit.com/testcarousel/
I've made an example, you could customize it as you want.
<!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.0">
<title>Carousel</title>
</head>
<body>
<div id="carousel" >
<p>Personal</p>
</div>
<style>
body{
max-width: 100vw;
max-height: 100vh;
background-color: black;
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
}
p{
margin: 10rem;
font-size: 2rem;
font-weight: 900;
color: white;
}
#carousel{
position: absolute;
top: 50vh;
left: 0%;
animation: mover 5s infinite;
}
#carousel>*{
display: inline-flex;
}
#carousel::before{
color: white;
content: 'YOUR TEXT';
}
#carousel::after{
color: white;
content: 'YOUR TEXT';
}
#keyframes mover {
0%{
position: absolute;
top: 50vh;
left: 0%;
}
100%{
position: absolute;
top: 50vh;
left: 85%;
}
}
</style>
</body>
</html>
Use Bootstrap carousel, this is much easier and more flexible to work with: here is an example:
Update: The main reason I am telling you to use this, is you have so many ways to design your carousel with all features in Bootstrap, here I just created the simplest one, you can use Left or Right or Click to move to the next slide, also it automatically moves to next slide.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/jquery-ui.min.css" rel="stylesheet">
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<title>Stack16</title>
</head>
<body>
<h1 class="text-center">Hello, text carousel!</h1>
<div id="textCaro" class="carousel slide mt-1 mb-1" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#textCaro" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#textCaro" data-bs-slide-to="1" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#textCaro" data-bs-slide-to="2" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#textCaro" data-bs-slide-to="3" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner mb-3 mt-3">
<div class="carousel-item active" >
<div class="card-header">
<h4 class="text-center">Text 1</h4>
</div>
</div>
<div class="carousel-item" >
<div class="card-header">
<h4 class="text-center">Text 1</h4>
</div>
</div>
<div class="carousel-item" >
<div class="card-header">
<h4 class="text-center">This is a long text...............</h4>
</div>
</div>
<div class="carousel-item" >
<div class="card-header">
<h4 class="text-center">Text 1</h4>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#textCaro" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#textCaro" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
The final result:
I have a simple navigation for resolution less than 757px I used bootstrap and pure JavaScript
if i resize my desktop browser it works but in mobile browser it doesn't work, even on fiddle it works but in real mobile browser it doesn't work(i have uploaded project to server)
now it doesnt work on desktop either i cant remove d-none class for links
html code
<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<header>
<div class="clearfix mx-3 my-2 d-md-none">
<label class="float-left">
<i class="fas fa-bars fa-2x p-1" role="button" id="sign-one" onclick="show()"></i>
<i class="fas fa-times fa-2x d-none p-1" role="button" id="sign-two" onclick="hide()"></i>
</label>
</div>
<div id="my-menu">
<ul class="list-unstyled d-none" id="links">
<p>واحدها<p>
<p> محصولات</p>
<p> <a href="/pages/درباره-ما"
class="text-white">درباره ما</a></p>
<p> اخبار</p>
<p> ارتباط با ما</p>
</ul>
</div>
</header>
</body>
</html>
css
#my-menu{
position: relative;
}
#links{
position: absolute;
padding: 30px 25px;
border-radius: 7px;
background-color: #3CB371;
text-align: center;
color: white;
transition:all .5s ease;
z-index: 10;
}
javascript
function show() {
document.getElementById("links").classList.toggle('d-none');
document.getElementById('sign-one').classList.toggle('d-none');
document.getElementById('sign-two').classList.toggle('d-none');
}
function hide() {
document.getElementById("links").classList.toggle('d-none');
document.getElementById('sign-one').classList.toggle('d-none');
document.getElementById('sign-two').classList.toggle('d-none');
}
here is the jsfiddle link
thank you in advance
I've changed your code little bit. jsfiddle working demo
HTML
<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
</head>
<body>
<header>
<div class="clearfix mx-3 my-2">
<label class="float-left d-none">
<i class="fas fa-bars fa-2x p-1" role="button" id="sign-one" onclick="toggle()"></i>
<i class="fas fa-times fa-2x d-none p-1" role="button" id="sign-two" onclick="toggle()"></i>
</label>
</div>
<div id="my-menu">
<ul class="list-unstyled" id="links">
<li>
واحدها
<p></p>
<p>محصولات</p>
<p>درباره ما</p>
<p>اخبار</p>
<p>ارتباط با ما</p>
</li>
</ul>
</div>
</header>
</body>
</html>
js
const navIcon = document.querySelector('.float-left')
const menu = document.querySelector('#my-menu')
const signOne = document.getElementById('sign-one');
const signTwo = document.getElementById('sign-two');
function toggle() {
signOne.classList.toggle('d-none');
signTwo.classList.toggle('d-none');
menu.classList.toggle('d-none')
}
function responsive(e) {
if (window.innerWidth < 757) {
navIcon.classList.remove('d-none')
menu.classList.add('d-none')
// If sign-two not hidden then menu shown on less then 757px screen
if (!signTwo.classList.contains('d-none')) {
menu.classList.remove('d-none')
}
} else {
navIcon.classList.add('d-none')
menu.classList.remove('d-none')
}
}
window.addEventListener('resize', responsive);
window.addEventListener('load', responsive);
Remove d-md-none from <div class="clearfix mx-3 my-2 d-md-none">
This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Closed 3 years ago.
I'm trying to create a simple website that has a Header containing the logo and other information, then a ribbon as separator and then a two-column section. Left column will have a selector. Right column will have information depending on the option chosen on the selector.
I was able to do this so far but now I wanna take it to the next level.
I would like my site to always fit to the window so no vertical scrollbar needed.
I'm comfortable with the sizes of my header and ribbon so I want the two-column section to take the remaining space in the window. The scrollbar, if needed, would be on the information div.
Just in case, I want the left-half (selector) to take as much space as it needs. Right-half (information) should adjust to the space it has left.
I have this code so far:
CSS
.container {
display: table;
width: 100%;
}
.left-half {
display: table-cell;
background-color:#7ec0ee;
}
.right-half {
display: table-cell;
overflow: auto;
}
HTML
<div id="header" style="background-color:#7ec0ee; padding-top:20px; padding-left:5px; padding-bottom:20px" align="center">
<div id="header-logo" align="left">
<img src=".." alt="MDN" width="160" height="113">
</div>
</div>
<div id="black-banner" style="background-color:black; padding:2px"> </div>
<div id="container" class="container">
<div class="left-half">
<select>..</select>
</div>
<div id="content" class="right-half"></div>
</div>
Here I have use some bootstrap classes. I think this will help you out.
<!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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-dark bg-dark navbar-expand-lg">
<a class="navbar-brand" href="#">Navbar w/ text</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-sm" style="background-color: lavender">
One of three columns
</div>
<div class="col-sm" style="background-color: #EAE7EE">
One of three columns
</div>
<div class="col-sm" style="background-color: #E6E2EB">
One of three columns
</div>
</div>
</div>
</body>
</html>
I suggest using flex. It's fantastic for responsive designs. You can set the width in the flex property on your left or right halwes.
.container {
display: flex;
width: 100%;
height: calc(100vh - 98px); //98px is the height of your header
}
.left-half {
flex: 1;
background: red;
}
.right-half {
flex: 1;
padding: 1em;
overflow: auto;
background: blue;
}
<div id="header" style="background-color:#7ec0ee; padding-top:20px; padding-left:5px; padding-bottom:20px" align="center">
<div id="header-logo" align="left">
<img src=".." alt="MDN" width="160" height="113">
</div>
</div>
<div id="black-banner" style="background-color:black; padding:2px"> </div>
<div id="container" class="container">
<div class="left-half">
<select>..</select>
</div>
<div id="content" class="right-half"></div>
</div>
This might work for you. you can make use of the calc function in CSS.
.container {
display: flex;
width: 100%;
height: calc(100vh - 100px); //Replace this 100px with whatever value elements other than container are occupying
}
.left-half {
width:50%;
background-color:#7ec0ee;
}
.right-half {
background: red;
width: 50%;
}
I'm making a website with Twitter's Bootstrap Framework (version 3), and I want to use the awesome script made by Roko C. Buljan Please see this StackOverflow post: How to fade loop background images?
This is my code:
HTML:
<!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 -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="img/favicon.ico">
<title>MY SITE</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/starter-template.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" rel="home" title="PAGE">
<img style="max-width:64px; margin-top: -8px;" src='img/logo.png'>
</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><i class='glyphicon glyphicon-tasks'></i> Info</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><i class='glyphicon glyphicon-lock'></i> Logout</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="fakebg"></div>
<div id='page' class="container">
<div class="starter-template">
<div class="row">
...
</div><!-- row -->
</div><!-- starter template -->
</div><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bgchanger.js"></script>
</body>
</html>
CSS:
html, body, .fakebg
{
background: #000 none 0 50% / no-repeat center center fixed;
overflow:auto !important;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#page
{
overflow:auto !important;
}
.fakebg
{
overflow:auto !important;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
width:100%;
height:100%;
background: #000 none 50% / cover no-repeat;
}
And bgchanger.js is the script by Roko.
The problem: My page is long (height), so the background cuts off at a certain height. This happens when I scroll.
What am I doing wrong?
Well, turns out that you need to set
html, body{ height:100%;}
in order to allow the .fakebg enlarge it's size to 100% (of the html / body parent ).
In my code, I have a persistent gap at the very top of my page that appears to be set to the tag by Bootstrap. I have searched via Firefox's inspector and have found nothing. Trying to add margin: 0; padding: 0; to the tag has done nothing either.
The #intro div here should be right at the top, but the space appears above it.
<body>
<div id="intro" style="width: 100%; padding:0; margin:0; text-align:center;">
<h2>Test</h2>
</div>
<nav class="navbar navbar-default" role="navigation" style="margin: 0; opacity: 0.95;">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<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>
<a class="navbar-brand" href="#" id="brand-mobile">Map My Cash</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="text-align: center;">
<ul class="nav navbar-nav" id="navbar-media-query" style="float: none; display: inline-block;">
<li>Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
#RenderBody()
</body>
You will have to override the default css.
Add following CSS after the default bootstrap CSS you are using:
body{
padding-top:0px;
margin-top: 0px;
}
Got it! The h1 was the problem. I added:
h1 {
margin-top: 0;
}
No-gap at the top of the page anymore!
You should add "margin: 0; padding: 0;" to the body tag
I ended up having to assign a border to get rid of the whitespace at the top.
<body><div style="border-top:solid black 1px;"><my-app>Loading...</my-app></div>
I found the problem in Site.css in the Content folder in my project.
body {
padding-top: 50px;
padding-bottom: 20px;
}
I simply commented-out the padding.
Can you try using reset css.there is a possiblity that the div or body can have some default padding or margin.