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
Related
I'm trying to vertically align a fontawesome icon with some text in a navbar from bootstrap. The vertical size of the navbar is set to 10vh. I'm not able to get the text aligned with the icon, it appears like in the below image:
Also I would like to add some horizontal space between the icon and the text. Here is my code:
<nav class="navbar navbar-expand-lg sticky-top navbar-dark bg-dark h-100">
<ul class="navbar-nav nav-fill w-100">
<li class="nav-item active">
<a class="nav-link d-flex align-items-center justify-content-center" href="#">
<i class="fa fa-home fa-2x icon-white"></i>
<p>Home</p><!--<span class="sr-only">(current)</span>-->
</a>
</li>
... (some more li)
</ul>
</nav>
I've also tried to put the icon inside the paragraph, placing the a element inside a div, and setting both of the same font-size, but I cannot make it work.
Try the following code, it worked for me:
<nav class="navbar navbar-expand-lg sticky-top navbar-dark bg-dark h-100">
<ul class="navbar-nav nav-fill w-100">
<li class="nav-item active">
<a class="nav-link" style="display: flex; align-items: center;" href="#">
<i class="fa fa-home fa-2x icon-white"></i>
<p style="margin-left: 12px;">Home</p>
</a>
</li>
... (some more li)
</ul>
</nav>
Also, here I'm giving the space between the text and the icon as 12px, you can change this according to your need.
You should make the tag a flex container with height 100% (obviously after setting position: relative. Then you can easily do justify-content: center; and align-items: center;
For any other HTML and CSS noob like me, it seems that p elements have margin by default. I have seen this question where it says that CSS 2.1 specification has a default style sheet for basic elements. Removing the bottom margin of the p element made it aligned with the icon.
Regarding horizontal space, DIVYIA BAID's suggestion to set a left margin is exactly what I was looking for.
it's very simple
Try This code for best alignment for Fontawesome or any other icon
<li styles="display:flex">
Home
<i class="fal fa-home" style="vertical-align: middle;margin: auto;"></i>
</li>
Wrap the content in a flex container and then align items center to horizontally align them.
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
I've been trying to replicate a few designs from already existing websites. How do I implement a panel that opens from the right when a collapsed Navbar is clicked ?
This is what I'm trying to acheive.
Target Navbar
I'm using Bootstrap 4 and I've tried a lot, messing with the alignment and padding but did not get a way to implement this. Do note that I don't need a right panel when the navbar is not collapsed (smaller viewports). Any suggestions ?
This is my current HTML code for the navbar
<nav class="navscroll navbar navbar-expand-sm bg-transparent navbar-dark fixed-top wow">
<a class="navbar-brand d-sm-none d-md-block d-none d-sm-block" href="#">
<img src="img/vamoslogo2.png" width="170" height=auto alt="">
</a>
<button class="navbar-toggler ml-auto hidden-sm-up float-xs-right" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
Home
</li>
<li class="nav-item">
Work
</li>
<li class="nav-item">
Contact Us
</li>
<li class="nav-item">
About
</li>
<li class="nav-item">
Blog
</li>
</ul>
</div>
I tried adding another class (.sidenav) so it becomes
<div class="collapse navbar-collapse sidenav" id="navbarCollapse">
And gave .sidenav the following CSS
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
As suggested by a post on w3schools. However, on doing this, all my navbar elements are not visible and my collapsed navbar does not work.
When the collapsed navbar is clicked, Bootstrap will probably change some classnames on the navbar element. Check this out in the inspector. Try to understand what happens and then write css that overrules what bootstrap does.
I'm don't know which classes bootstrap adds, but let's assume it adds a class 'collapsed', then you could write something like this and add your transition and other styling.
.sidenav {
position: absolute;
right: 0;
left: auto;
}
.collapsed .sidenav {
left:100vw;
right:auto;
}
I'm using bootstrap 4.1 navbar here. I want my div "#pin_to_top" to be always at the top of the navbar. So that on wider screens it is
Logo - Menu - "#pin_to_top" (all on the same row)
and on smaller devices it is like
Logo - "#pin_to_top#
Menu (menu is under my logo and div)
Also any other piece of advice about my code would be much appreciated :)
.navbar-brand img {
height: 2rem;
}
.phonecall {
border-radius: 2rem;
background-color: #28a745;
font-weight: bold;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-light bg-light d-flex flex-column flex-md-row navbar-expand">
<a class="navbar-brand" href="#">
<p>LOGO</p>
</a>
<div class="d-flex">
<ul class="navbar-nav flex-fill pl-md-5 text-nowrap">
<li class="nav-item "><a class="nav-link" href="#">Menu1</a></li>
<li class="nav-item "><a class="nav-link" href="#">Menu2</a></li>
<li class="nav-item "><a class="nav-link" href="#">Menu3</a></li>
<li class="nav-item "><a class="nav-link" href="#">Menu4</a></li>
</ul>
</div>
<div id="pin_to_top" class="ml-auto d-flex flex-column flex-md-row align-self-start" >
<div class="p-2">
<a class="">Some info here</a>
</div>
<div class="navbar-text text-nowrap phonecall px-2">
<a class="text-white" href="tel:+78005553535">+7-(800)-555-35-35</a>
</div>
</div>
</nav>
Bootstrap 4 includes a fixed-top class to solve your problem. ;)
you should give position fix to your class and give this top:0;
use position absolute for parent and add some css for a good design on small screen
#include media-breakpoint-up(md) {
div#pin_to_top {
position: absolute;
left: auto;
right: 0px;
}
}
My main problem is with a logo. Below is my header element where I attached my navbar and logo. The Header contains a background image and in it I placed my navbar.
HTML
<div class="header">
<div class="container">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-faded">
<a class="navbar-brand" href="#"><img src="images/logo.svg" /></a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbarNavDropdown" class="navbar-collapse collapse justify-content-end">
<ul class="navbar-nav ">
<li class="nav-item">
<a class="nav-link" href="#">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Register</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
CSS
.navbar-brand > img {
width: 100%;
}
It looks like this:
image
And when I specify width for the logo (like 20em), it becomes bigger but it moves the li items too. I don't want my li items be affected. Plus I want the logo to be responsive when I specify width it still remains the same in smaller screens.
iamge2
I experimented a lot with logo sizes on bootstrap3 navbar.
For me this works best.
First I give the navbar my desired height, and set the li > a line-height to the same height, so the link padding-top and padding-bottom are fixed (links are vertical centered).
.navbar {
min-height: 100px;
}
ul.navbar-nav > li > a {
line-height: 100px;
}
The navbar now is 100px height. With padding in mind my logo should now have a max-height of 80px cause we need 10px padding-top and 10px for padding-bottom. Lets say the logo has a width of 200px and a height of 80px, I give the img the class logo.
<a class="navbar-brand" href="#"><img src="#" class="logo" alt=""></a>
Now keep the padding in mind, I add 10px of padding-top to the logo.
img.logo {
padding-top: 0px;
width: 200px;
height: auto;
}
If you want different logo sizes, just change the navbar min-height/line-height and change the logo width/padding.
Bootstrap 3 fiddle:
https://jsfiddle.net/yghg5hsx/
Bootstrap 4 fiddle:
https://jsfiddle.net/973Lde7j/3/
put your logo inside a div and the rest of the navbar content in another div
then try this:
#navbar { width:100%}
#logoDiv { width:20% }
#contentDiv { width:80% }