Navbar height on scroll - html

Question

I am creating a simple navigation in angular 6, am using bem methodology and flexbox for css.
Here is the navigation markup:
<div class="main-header">
<nav class="main-nav" ng-sticky [offSet]="0" [addClass]="'main-sticky'" appMainNav #ref="appMainNav">
<div class="main-nav__logo " ng-sticky [offSet]="0" [addClass]="'main-sticky__logo'">
<img class="man-nav__logo-green" src="/assets/images/logo-white.png">
</div>
<div class="main-nav__toggle">
<i class="main-nav__bars fa fa-bars" ng-sticky [offSet]="0" [addClass]="'main-bars'"></i>
</div>
<ul class="main-nav__list " ng-sticky [addClass]="'main-sticky-link'" [ngClass]="ref.click === true? 'Navbar__ToggleShow' :''">
<li class="main-nav__item">
<a class="main-nav__link" href="#">Home</a>
</li>
<li class="main-nav__item">
<a class="main-nav__link" href="#">About us</a>
</li>
<li class="main-nav__item">
<a class="main-nav__link" href="#">What we do</a>
</li>
<li class="main-nav__item">
<a class="main-nav__link " href="#">Projects</a>
</li>
<li class="main-nav__item">
<a class="main-nav__link " href="#">Contact</a>
</li>
</ul>
</nav>
<div class="main-banner">
<h2>We are a team of
<strong>experts</strong>.</h2>
<p>Founded in 2014, the BDTS Poland specializes in IT personnel outsourcing for the areas of banking, insurance, telecommunications,
high-tech, pharmacy, logistics and many others</p>
<a href="http://en.astek.pl/about-us/" class="main-banner__green-button main-banner__arrow-right">Read more
<i></i>
</a>
</div>
</div>
Here is the mobile CSS for navbar:
#media only screen and(max-width: 768px) {
.main-nav {
margin: 0;
display: block;
position: inherit;
height: auto;
overflow: auto;
background: white;
}
.main-nav__list {
margin-top: 20px;
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
}
.main-nav__item:after {
content: '';
width: 1px;
}
.Navbar__ToggleShow {
display: flex;
}
.main-nav__logo {
position: relative;
bottom: 49px;
background-repeat: no-repeat;
background-image: url("/assets/images/logo-green.png");
}
.man-nav__logo-green {
visibility: hidden !important;
}
.main-nav__bars {
display: flex;
justify-content: flex-end;
cursor: pointer;
padding: 26px;
font-size: 50px;
color: #00964e;
top: 0;
margin-top: -196px;
}
.main-nav__link {
color: #444;
}
}
In desktop version everything works fine: but in mobile version navbar increase its height on scroll and hamburger menu disappears,
Here is the solution I tried: (removing height in .man-nav)
.main-nav {
margin: 0;
display: block;
position: inherit;
overflow: auto;
background: white;
}
Now navbar height does not increase on scroll but hamburger menu disappear.
UPDATE - Here is the full CSS for navbar component:
#charset "UTF-8";
#font-face {
font-family: "icomoon";
src: url("/assets/fonts/icomoon.ttf");
}
.main-header {
width: 100%;
float: left;
display: block;
min-height: 100vh;
height: 100%;
background-size: cover;
background-position: center;
padding-bottom: 100px;
background-image: url("/assets/images/banner.jpg");
}
.main-sticky {
background-color: white;
height: 100px;
}
.main-sticky__logo {
position: relative !important;
background-repeat: no-repeat;
background-image: url("/assets/images/logo-green.png");
}
.main-sticky-link .main-nav__link {
color: #444 !important;
}
.main-nav {
position: sticky;
align-items: center;
justify-content: space-around;
left: 0;
display: flex;
z-index: 2;
width: 100%;
}
.main-nav__logo {
position: relative;
}
.main-nav__bars {
color: white;
}
.main-nav__list {
list-style: none;
display: flex;
color: white;
position: relative !important;
}
.main-nav__item {
padding: 24px 27px;
position: relative;
}
.main-nav__item:after {
-webkit-transition: all 0.15s ease-in-out;
transition: all 0.15s ease-in-out;
content: "";
display: block;
float: left;
background-color: #f5f5f5;
width: 2px;
height: 60px;
-webkit-transform: rotate(20deg);
transform: skew(155deg);
position: absolute;
right: 0;
bottom: 6px;
}
.main-nav__item:last-child::after {
content: "";
width: 0px;
}
.main-nav__item:hover::after {
width: calc(100% + 1px);
}
.main-nav__item:hover .main-nav__link {
color: #444;
position: relative;
z-index: 3;
}
.main-nav__link {
list-style: none;
font-size: 1rem;
color: white;
font-family: "proxima-nova-n6", "proxima-nova";
font-style: normal;
font-weight: 600;
}
.main-nav__bars {
display: none;
}
.main-banner {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.main-banner h2 {
font-size: 3.75rem;
line-height: 5.375rem;
margin-bottom: 1.5rem;
color: #fff;
font-family: "proxima-nova-n4", "proxima-nova";
font-style: normal;
font-weight: 400;
margin-top: 70px;
font-weight: normal;
}
.main-banner p {
font-size: 1.25rem;
font-weight: normal;
color: white;
text-align: center;
max-width: 700px;
margin-bottom: 3.375rem;
margin-right: auto;
margin-left: auto;
}
.main-banner__green-button {
height: 3.4375rem;
background-color: #00964e;
text-decoration: none;
color: #fff;
padding: 11px 13px;
display: inline-block;
box-sizing: border-box;
line-height: 27px;
border-radius: 30px;
border: 3px solid #00964e;
font-size: 1.125rem;
padding-right: 50px;
font-family: "proxima-nova-n6", "proxima-nova";
font-style: normal;
font-weight: 600;
position: relative;
-webkit-transition: all 0.15s ease-in-out;
transition: all 0.15s ease-in-out;
}
.main-banner__arrow-right::after {
font-family: "icomoon";
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
content: "" !important;
font-size: 33px;
}
.main-banner__green-button::after {
float: right;
content: "";
display: block;
width: 34px;
height: 34px;
margin-left: 10px;
top: 10px;
position: absolute;
right: 10px;
}
.main-banner__green-button:hover {
background-color: white;
color: green;
}
.main-banner__arrow-down {
transform: rotate(90deg);
width: 34px;
height: 34px;
position: absolute;
bottom: 176px;
margin-left: -17px;
left: 50%;
z-index: 2;
-webkit-transition: all 0.15s ease-in-out;
transition: all 0.15s ease-in-out;
background-image: url("/assets/images/icon-arrow-right.png");
}
#main-sticky {
background-color: white;
}
#media only screen and (max-width: 768px) {
.main-nav {
margin: 0;
display: block;
position: inherit;
height: auto;
overflow: auto;
background: white;
}
.main-nav__list {
margin-top: 20px;
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
}
.main-nav__item:after {
content: "";
width: 1px;
}
.Navbar__ToggleShow {
display: flex;
}
.main-nav__logo {
position: relative;
bottom: 49px;
background-repeat: no-repeat;
background-image: url("/assets/images/logo-green.png");
}
.man-nav__logo-green {
visibility: hidden !important;
}
.main-nav__bars {
display: flex;
justify-content: flex-end;
cursor: pointer;
padding: 26px;
font-size: 50px;
color: #00964e;
/* position: absolute; */
top: 0;
/* bottom: 36px; */
/* right: 28px; */
margin-top: -196px;
}
.main-nav__link {
color: #444;
}
.main-banner__arrow-down {
display: block !important;
position: initial;
margin: 0 auto;
margin-top: 50px;
}
.main-banner h2 {
text-align: center;
}
}
Here is a link to the live demo
Here is GitHub repo if interested
What is wrong with my code? please help, any suggestions will be appreciated, thanks.

Answer 1

There is a lot to debug, here is what I spotted:
nav bar (.main-nav):
First of all, you got a script (index.js) that sets main-nav, main-nav__bars and main-nav__list position to fixed on scroll. You don't need to do that for all three components. Just set main-nav and let the children inherit.
Next you're better off changing height: auto to min-height: 125px (enough to fit the logo)
Then you need to set the nav .main-nav) overflow-x: hidden to eliminate the scrollbar on the right when overflow bugs occur.
Or better yet, make your logo itself and it's container (.main-nav__logo) have a fixed height that matches (height: 125px) and let the logo height: inherit. (you will need to crop your image for that to look nice. See reason on next section)
You're also overriding the display: flex to block with your media query. Remove that so you will be able to use the flex properties. Afterwards you can do something like: (append into your mobile media query)
.main-nav {
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-content: stretch;
align-items: stretch;
}
.main-nav__logo {
flex: 2 1 60%;
}
.main-nav__toggle {
flex: 2 1 30%;
}
.main-nav__list {
flex: 0 1 100%;
}
This should give you a result like this:
|-----------------------|----------|
| Logo | Bars |
|-----------------------|----------|
| |
| Nav ul |
| |
|----------------------------------|
Logo (.man-nav__logo-green):
Next your logo is 200x200 with lots of transparent margin, fix your logo by cropping it down using Photoshop or something to element the fixed margin. This will let your logo to fit in without overflowing the nav bar. (and more flexible in regards to margin styling)
a dirty solution is to change the logo's container to (.main-nav__logo) height: 160px and add a margin-top: -35px.
Hopefully that should make your life a bit easier. Regards.