I want to start hiding content 100px from top. I have applied Bootstrap Affix with Nav in same div. but when i am scrolling up affix work fine but i want to hide div after affix div not from browser top.
Here is my code
<div class="col-lg-9">
<div class="header-affix" data-spy="affix" data-offset-top="50" data-offset-bottom="380" style="z-index: 1" id="header">
<div>Content</div>
<div>Content</div>
<ul class="nav nav-inline act-details" id="menu" role="navigation">
<li class="nav-item active">
<a class="nav-link" href="#desc">Description</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#img">Images</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#maps">Map</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#details">Details</a>
</li>
</ul>
</div>
<div class="act-detail">
<div class="description" id="desc"></div>
<div class="images" id="img"></div>
<div class="maps" id="maps"></div>
<div class="details" id="details"></div>
</div>
In your CSS file
.affix {
top: 100px
}
Related
It is a bit complicated to tell when I am trying to do so I add a drawing ;) I hope it's clear enough
I want the menu to go on the top and stay here when going down, but this only after the header has been scrolled to its bottom.
I am using bootstrap and also wonder how to make the selected submenu as active when I scroll to it
<div>
<nav class="navbar navbar-expand-lg navbar-light bg-light" style="background-color: white !important">
<div class="collapse navbar-collapse" id="navbarTogglerDemo03" style="background-color: white">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link navbar-whitepanel selected" href="#raceAbout">{{$t('race.about')}} <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link navbar-whitepanel" href="#raceJourney">{{$t('race.parcours')}}</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-whitepanel" href="#racePictures">{{$t('race.photos')}}</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-whitepanel" href="#raceRate">{{$t('race.opinions')}}</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-whitepanel" href="#raceResults">{{$t('race.results')}}</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-whitepanel" href="#similarRaces">{{$t('race.similarRaces')}}</a>
</li>
</ul>
</div>
</nav>
<div style="margin: 2em;"></div>
</div>
You should use position: sticky; to achieve this type of navigation menu. Click on below website to read more in details.
Open this site
I hope this is what u r expecting check my answer.
just add the below given css properties to nav bar:
position:sticky;
top:0;
z-index:1;
NOTE: check out my answer in full screen mode. Because According to u r code navbar appears only in large screens
Demo:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container">
<p>some text</p>
<p style="margin-top:100px;">some text</p>
</div>
<nav class="navbar navbar-expand-lg navbar-light bg-light" style="background-color: white !important;position:sticky; top:0;z-index:1;">
<div class="collapse navbar-collapse" id="navbarTogglerDemo03" style="background-color: white">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link navbar-whitepanel selected" href="#raceAbout">{{$t('race.about')}} <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link navbar-whitepanel" href="#raceJourney">{{$t('race.parcours')}}</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-whitepanel" href="#racePictures">{{$t('race.photos')}}</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-whitepanel" href="#raceRate">{{$t('race.opinions')}}</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-whitepanel" href="#raceResults">{{$t('race.results')}}</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-whitepanel" href="#similarRaces">{{$t('race.similarRaces')}}</a>
</li>
</ul>
</div>
</nav>
<div style="margin: 2em;"></div>
<div class="jumbotron text-center">
<h1>some contents </h1>
<p>lorem ipsum dolor sit amet, consectetur .....</p>
</div>
<div class="container">
<p style="margin-top:100px;">some text</p>
<p style="margin-top:100px;">some text</p>
<p style="margin-top:100px;">some text</p>
<p style="margin-top:100px;">some text</p>
<p style="margin-top:100px;">some text</p>
<p style="margin-top:100px;">some text</p>
<p style="margin-top:100px;">some text</p>
<p style="margin-top:100px;">some text</p>
<p style="margin-top:100px;">some text</p>
<p style="margin-top:100px;">some text</p>
<p style="margin-top:100px;">some text</p>
<p style="margin-top:100px;">some text</p>
</div>
I have a problem in bootstrap 4 navigation, I want to set left Logo/Brand and center Navigation button and right login/My Account button, I have tried to solve this, but when I click navigation button on mobile it suddenly goes to the right, Please look at codeplay http://codeply.com/go/8FOVzFRkfM
<nav class="navbar navbar-expand-md navbar-light" >
<div class="container"> <a class="navbar-brand text-primary" href="#">
<i class="fa d-inline fa-lg fa-stop-circle"></i>
<b> BRAND</b>
</a> <button class="navbar-toggler navbar-toggler-right border-0" type="button" data-toggle="collapse" data-target="#navbar4">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar4">
<ul class="navbar-nav ml-auto">
<li class="nav-item bg-white border-success"> <a class="nav-link" href="#">Features</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">About</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">FAQ</a> </li>
</ul>
</div>
<span> <a class="btn navbar-btn ml-md-2 btn-light bg-info">My Account</a></span>
</div>
</nav>
You just need to use on order-md-0 order-last the navbarcollapse so that it is positioned last on mobile screen widths (when the Navbar is collapsed)...
<div class="collapse navbar-collapse order-md-0 order-last" id="navbar4">
<ul class="navbar-nav ml-auto">
<li class="nav-item bg-white border-success"> <a class="nav-link" href="#">Features</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">About</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">FAQ</a> </li>
</ul>
</div>
https://www.codeply.com/go/KkYoATqtFy
Related: Bootstrap NavBar with left, center or right aligned items
The container inside the navbar is a flex having justify-content: space-between, Hence navbar-collpase which is initially hidden gets displayed on toggle gets pushed below.
Solution:
Making the navbar-collpase positioned absolute to the navbar will fix the problem.
Example:
#media only screen and (max-width: 600px) {
.navbar-collapse{
position: absolute;
width: 100%;
top: 56px; /*height of navbar in mobile*/
}
}
What I am trying to achieve is this:
Without using javascript/jquery.
I have a topbar and a sidebar. On smaller screens, I want the sidebar to collapse and have a button on top, and when the button is clicked the sidebar toggles horizontally, adding opacity to the background, putting the button on the topbar, and putting all content from within the topbar inside the sidebar.
Similar to when the screen is small for Youtube page, and the sign in option appears on the sidebar.
This is the code I have so far :JSFIDDLE
<header>
<nav class="navbar navbar-expand-sm fixed-top navbar-light bg-faded">
<button class="navbar-toggler " type="button" data-toggle="collapse" data-target="#sidebar" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<img class="navbar-brand navbar-logo" src="" />
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav ml-auto user-info">
<li class="avatar">
<img src="">
</li>
<li class="nav-item dropdown">
<a class="nav-link ">Hello</a>
</li>
</ul>
</div>
</nav>
</header>
<div class="container-fluid">
<div id="mySidenav">
<nav class="col-sm-3 col-md-3 col-6 col-lg-2 d-sm-block sidebar collapse
width " id="sidebar">
<ul class="nav nav-pills flex-column">
<li class="nav-item collapsed side" data-toggle="collapse" data-target="#home">
<a class="nav-link">
<img src="" />Home </a>
</li>
<ul class="sub-menu collapse" id="home">
<li class="nav-item list-unstyled">
<a class="nav-link">Submenu1</a>
</li>
<li class="nav-item list-unstyled">
<a class="nav-link">Submenu2</a>
</li>
<li class="nav-item list-unstyled">
<a class="nav-link">Submenu3</a>
</li>
<li class="nav-item list-unstyled">
<a class="nav-link">Submenu4</a>
</li>
</ul>
<li class="nav-item side">
<a class="nav-link">
<img src="a" />Menu Item</a>
</li>
<li class="nav-item side">
<a class="nav-link">
<img src="" />Menu Item</a>
</li>
<li class="nav-item side">
<a class="nav-link">
<img src="" />Menu Item</a>
</li>
<li class="nav-item side">
<a class="nav-link">
<img src="" />Menu Item</a>
</li>
</ul>
</nav>
</div>
<main role="main" class="col-sm-9 ml-sm-auto col-md-9 col-lg-10 pt-3 content">
<h1>
Main Content here
</h1>
</main>
</div>
in your JSFiddle change css (top has to be 0px) : JsFiddle
.sidebar {
position: fixed;
top: 0px;
left: 0;
z-index: 1;
padding: 0;
overflow-x: hidden;
/* Scrollable contents if viewport is shorter than content. */
border-right: 1px solid #eee;
background-color: black;
height: 100%;
}
I need a simple schema like this in picture:
This is a try: http://plnkr.co/edit/6v6C4PZCGfvH9FavNai0?p=preview without success.
How to accomplish this?
I need what is in picture. Exactly.
In xs mode I disable many things. My problem is in desktop mode.
<div class="container-fluid" style="background:red">
<div class="row">
<div class="d-inline-block" style="background-color:blue">
<div class="container">
<nav class="navbar navbar-light" style="background:white">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</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>
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item">
<a class="nav-link" href="#">Right</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="d-inline-block" style="background-color:yellow; float:right">
<span class="d-inline-block" style="background:white; padding: 20px">User box</span>
</div>
</div>
</div>
There's no much sense develop in bootstrap without grid/colmuns orientantion. You can set a fixed width for you inner element "user box".
Try this code
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#4.0.0-alpha.3" data-semver="4.0.0-alpha.3" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" />
<script data-require="bootstrap#4.0.0-alpha.3" data-semver="4.0.0-alpha.3" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="container-fluid" style="background:red">
<div class="row">
<div class="container">
<div class="col-md-9 col-lg-9">
<nav class="navbar navbar-light" style="background:white">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</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>
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item">
<a class="nav-link" href="#">Right</a>
</li>
</ul>
</nav>
</div>
<div class="col-md-3 col-lg-3" style="background-color:yellow; float:right">
<span class="d-inline-block" style="background:white; padding: 20px">User box</span>
</div>
</div>
</div>
</body>
</html>
I have a Foundation 5 based site with a nav bar at the top.
Because my menu choices are larger text they overlap the left "Name" section when the screen is made narrower.
Is there a way to control when the nav menu slips into mobile style?
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<div class="logo">
<a href="#">
<img src="mylogo.png"/>
</a>
</div>
</li>
<li class="toggle-topbar menu-icon">
<a href="#">
<span></span>
</a>
</li>
</ul>
<section class="top-bar-section hide-for-medium-down ">
<!-- Right Nav Section -->
<ul class="right">
<li class="active">
<a href="/home/index" class="menuMix">
#*<span class="menuMinor">Home Page</span>*#
<span class="menuMain allCaps">Home</span>
</a>
</li>
<li class="">
<a href="/home/about" class="menuMix">
#*<span class="menuMinor">Who We Are</span>*#
<span class="menuMain allCaps">About</span>
</a>
</li>
<li class="">
<a href="/home/contact" class="menuMix">
#*<span class="menuMinor">Get In Touch</span>*#
<span class="menuMain allCaps">Contact</span>
</a>
</li>
</ul>
</section>
</nav>
If you use SCSS you can try to decrease
$topbar-link-weight: $font-weight-normal;
$topbar-link-font-size: rem-calc(13);