I'm currently trying to create an effect - imagine a fullscreen image which is fixed and will be hidden below the content div on scroll (parallax). Additionally I want the navbar to not move on scroll, hence it's fixed. But I want the navbar to also be hidden below the content div as soon as it's being reached on scroll.
Therefore I've tried to use z-index, but without success. Somehow I'm not able to hide the fixed navbar below the content div.
Header:
<div class="container-fluid position-fixed">
<div class="row m-0 w-100">
<div class="col-2 justify-content-center d-flex offset-5">
<a class="align-self-center" routerLink="">
<h1>NØREBRO STUDIOS</h1>
</a>
</div>
<div class="col-5 pl-5">
<ul class="nav justify-content-start">
<li class="nav-item mr-5">
<a class="nav-link" routerLink="cases">Work</a>
</li>
<li class="nav-item mr-5">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</div>
CSS:
.container-fluid {
z-index: 1;
background-color: transparent;
padding: 3em 0em;
}
Content (upper-container is supposed to hide the header on scroll):
<div class="container-fluid px-0">
<app-transparent-header></app-transparent-header>
</div>
<div class="front-image min-vh-100 min-vw-100">
</div>
<div class="container-fluid upper-container">
...
CSS:
.front-image {
background-image: url("/assets/images/savum/savum-front.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.upper-container {
padding: 15em 15em 0em 15em;
background-color: blue;
}
.container-fluid {
z-index: 9999;
}
If I understand correctly, you want the header to be hidden but you want the navigation bar to be fixed the top of the screen when you scroll:
.nav-parent {
position: sticky;
position: -webkit-sticky;
top: 0;
z-index: 999;
}
Set a parent class over the navigation bar, and assign it those values
Related
This is an angular 12 project. I have a sidebar which I have defined with fixed position. It is in the app-component, so present on every page. However, when I click on the home button, how do I ensure that the contents in home are always after the sidebar to the right with equal spacing between left that is the sidebar and right of the screen?
Here is my code:
<nav class="navbar navbar-expand d-flex flex-column align-item-start sidebar">
<a class="navbar-brand mt-2">
<img [src]="IconUrl" height="50" width="120">
</a>
<ul class="navbar-nav d-flex flex-column mt-2 w-100">
<li class="nav-item w-100">
<a class="nav-link text-light pl-4" [routerLink]="['home']"
routerLinkActive="active"><i class="fa fa-home me-2"></i>Home</a>
</li>
</nav>
styles.scss
.sidebar {
width: 20%;
height: 100vh;
position: fixed;
background-color: $purple;
transition: all 0.4s ease;
color: $white;
}
You could set padding or margin for your content element. Assume your side bar has 200px width, you should add margin-left : 210px for your content element.
I think you just need margin-right for your sidebar
so you can add margin-right: 16px to sidebar class or add <nav class="mr-3"> to nav tag.
*the margin value depends on you
You can also get better help by adding an image
I am using Bootstrap's navbar with .shadow-sm. I have two divs beneath it, one without background and the other one with a white background.
The shadow is showing as normal in the div with no background set, but being hidden by the white background.
<body>
<div id="app">
<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
<div class="container">
<a class="nav-brand" href="{{ url('/') }}">
Home
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav mr-auto">
</ul>
<!-- Right Side Of Navbar -->
<ul class="navbar-nav ml-auto">
<!-- Authentication Links -->
<li class="nav-item pr-md-4">
<a class="nav-link" href="#">Platform</a>
</li>
<li class="nav-item pr-md-4">
<a class="nav-link" href="#">Settings</a>
</li>
<div class="navbar-text border-left d-sm-none d-md-block pl-md-3"></div>
</ul>
</div>
</div>
</nav>
<main class="pb-4">
<div class="container-fluid">
<div class="row">
<div class="col-md-3 left-panel pt-5 pr-4 d-none d-md-block text-right">
Left menu
</div>
<div class="col-12 col-md-9 pt-5 px-4 center-panel">
<div class="h1">
Dashboard
</div>
<div class="row">
<div class="col-12 col-md-6">
Welcome back!
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</body>
html, body {
font-family: $font-family-sans-serif;
font-size: 1rem;
line-height: 1.8;
font-weight: normal;
color: $textBlack;
background: linear-gradient(180deg, #E9EDF3 0%, rgba(255, 255, 255, 0) 100%);
min-height: 100%;
margin: 0;
}
.left-panel {
min-height: 100vh;
}
.center-panel {
min-height: 100vh;
background-color: white;
}
.content-panel {
min-height: 100vh;
}
.right-panel {
min-height: 100vh;
background-color: white;
}
Can anyone see what I am doing wrong here? I've tried adding and removing padding and margins, but it seems as if the white background is overlaying the shadow.
The two panels are different colours, so I can't just remove the background and use the body background.
It is happening because of the stack order of the elements.
The element with white background is in front of the navbar.
You can solve it just by placing the navbar element in the front with z-index:
nav {
z-index: 1;
}
I have a background image with a navbar and some content on top of it. What is happening is the navbar and related content that is inside the bgimg div is repeating on top of the background image which covers the entire screen.
<div class="bgimg">
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="d-flex flex-grow-1" style="margin-left: 5%">
<span class="w-100 d-lg-none d-block"></span>
<a class="navbar-brand" routerLink="/">Home</a>
<div class="w-100 text-right">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar7">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
<div class="collapse navbar-collapse flex-grow-1 text-right" id="myNavbar7" style="margin-right: 5%">
<ul class="navbar-nav ml-auto flex-nowrap">
<li class="nav-item">
<a routerLink="/software" class="nav-link">Software</a>
</li>
<li class="nav-item">
<a routerLink="/about" class="nav-link">About</a>
</li>
<li class="nav-item">
<a routerLink="/contact" class="nav-link">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="myName">
<span>blah</span>
<div class="description">
<span>Developer</span>
</div>
</div>
</div>
.bgimg {
background: url("/assets/images/DSC01250.jpg") no-repeat center center fixed;
background-size: cover;
opacity: 0.8;
}
.myName {
font-family: 'Courier New', Courier, monospace;
margin-top: 300px; //half page height
color: white;
font-size: 50px;
text-align: center;
}
.description {
font-size: 25px;
}
I would just like one background image that covers the screen with no repeating content on top of it.
I ended up adding a position: fixed; attribute and adding a width and height attribute to hold all divs true to their parent container.
I have a problem that I can not make navigation block visible if(its fixed)
styles:
<div class="main_nav">
<div class="container">
<div class="row">
<div class="col-xs-1"></div>
<div class="col-xs-2">
<a href="#" style="text-decoration: none;">
<h1 class="navbar-brand company_title" href="#">Tourer</h1>
</a>
</div>
<div class="col-xs-9">
<div class="navigation">
<ul class="nav navbar-nav navbar-right top_nav">
<li><a id="nav_about" href="javascript: void(0);">About</a></li>
<li><a id="nav_how_it_works" href="javascript: void(0);">How it works</a></li>
<li><a id="nav_features" href="javascript: void(0);">Features</a></li>
<li><a id="nav_footer" href="javascript: void(0);">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
.main_nav {
width: 100%;
z-index: 1000;
position: fixed;
background: url('../images/gradient.png');
padding-top: 30px;
min-width: 1280px !important;
Screen:
http://i.stack.imgur.com/Zljz4.png
I cannot scroll to see the right part of my nav.
Please help me.
The fixed position is always relative to viewport. Hence, min-width: 1280px !important; automatically assumes that your width:100% will be ignored when the screen is smaller than 1280px. Try remove the min-width declaration.
My question is how you can center the pills?
I've tried to add center block around and also to change the float:left to float:center but nothing helps.
This has gotten much simpler! You just need to use the text-center class on the container, and apply display:inline-block to the ul. Just make sure you have a line break or paragraph tag separating the nav from any other elements within the container.
Done! 2 class additions, 1 line of CSS (don't modify the bootstrap css file!).
HTML:
<div class="col-md-12 text-center">
<p>Copyright stuff</p>
<ul class="nav nav-pills center-pills">
<li>Footer nav link</li>
<li>Footer nav link</li>
</ul>
</div>
CSS:
.center-pills { display: inline-block; }
Edit 2015: As Artur Beljajev has brought up, Flexbox support is now common enough that you may want to use that instead:
.center-pills {
display: flex;
justify-content: center;
}
If you'd like variable width pills in a variable width container, I'd suggest using the inline-block display type and adding a class to the pill container.
Here is how I extended bootstrap for centering pills.
CSS:
.centered-pills { text-align:center; }
.centered-pills ul.nav-pills { display:inline-block; }
.centered-pills li { display:inline; }
.centered-pills a { float:left; }
* html .centered-pills ul.nav-pills { display:inline; } /* IE6 */
*+html .centered-pills ul.nav-pills { display:inline; } /* IE7 */
HTML:
<div class="row">
<div class="span12 centered-pills">
<ul class="nav nav-pills">
<li>derek</li>
<li>brooks</li>
<li>is</li>
<li>super</li>
<li class="active">awesome</li>
</ul>
</div>
</div>
Or flexbox approach:
.nav-pills {
display: flex;
justify-content: center;
}
If you want the pills to be centered instead of left aligned you will need to change the css. You will need to specifiy a width and change the margin to be auto.
For example:
.tabs, .pills {
margin: 0 auto;
padding: 0;
width: 400px;
}
While the answer of #minaz works for a list with a known width, i'd propose a different solution which actually works even if you change the content of the list:
.tabs, .pills {
text-align: center;
}
.tabs li, .pills li {
float: none;
}
Or in SCSS:
.tabs, .pills {
text-align: center;
li { float: none; }
}
This will center the text inside the list, and resets the float property for the list items so they are affected by the text-align property.
A simple solution with Bootstrap 4
Use justify-content-center at <ul> nav
Example:
#import url('https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="mt-5">
<ul class="nav nav-pills mb-3 justify-content-center" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
<div class="card text-white bg-success mb-3 mx-2 px-2">
<h1>Hi</h1>
</div>
</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
<div class="card text-white bg-info mb-3 mx-2 px-2">
<h1>Hi</h1>
</div>
</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
<div class="card text-white bg-danger mb-3 mx-2 px-2">
<h1>Ni Hao</h1>
</div>
</div>
</div>
</div>
Bootstrap 4 solution is very easy:
<ul class="nav justify-content-center">
https://getbootstrap.com/docs/4.0/components/navs/