How to shrink Navigation menu or bar on Scroll

0 votes
Hii,

Can anyone provide snippet on having shrinking of navigation bar when i scroll down the web page?
Feb 19, 2020 in PHP by kartik
• 37,520 points
3,809 views

1 answer to this question.

0 votes

Hey,

You can follow the steps below in order to have shrinking of navigation menu on scrolling the page down:

Step 1) Add HTML:

Create a navigation bar:

<div id="navbar">
  <a href="#default" id="logo">CompanyLogo</a>
  <div id="navbar-right">
    <a class="active" href="#home">Home</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a>
  </div>
</div>

Step 2) Add CSS:

Style the navigation bar:

/* Create a sticky/fixed navbar */
#navbar {
  overflow: hidden;
  background-color: #f1f1f1;
  padding: 90px 10px; /* Large padding which will shrink on scroll (using JS) */
  transition: 0.4s; /* Adds a transition effect when the padding is decreased */
  position: fixed; /* Sticky/fixed navbar */
  width: 100%;
  top: 0; /* At the top */
  z-index: 99;
}

/* Style the navbar links */
#navbar a {
  float: left;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  line-height: 25px;
  border-radius: 4px;
}

/* Style the logo */
#navbar #logo {
  font-size: 35px;
  font-weight: bold;
  transition: 0.4s;
}

/* Links on mouse-over */
#navbar a:hover {
  background-color: #ddd;
  color: black;
}

/* Style the active/current link */
#navbar a.active {
  background-color: dodgerblue;
  color: white;
}

/* Display some links to the right */
#navbar-right {
  float: right;
}

/* Add responsiveness - on screens less than 580px wide, display the navbar vertically instead of horizontally */
@media screen and (max-width: 580px) {
  #navbar {
    padding: 20px 10px !important; /* Use !important to make sure that JavaScript doesn't override the padding on small screens */
  }
  #navbar a {
    float: none;
    display: block;
    text-align: left;
  }
  #navbar-right {
    float: none;
  }
}

Hope this is working for you.

answered Feb 19, 2020 by varun

Related Questions In PHP

0 votes
1 answer

How to retrieve or obtain data from the MySQL database using PHP?

Hello kartik,  Actually there are many functions that  ...READ MORE

answered Mar 27, 2020 in PHP by Niroj
• 82,840 points
3,383 views
0 votes
1 answer

How to check if php session is already started or not?

Hello kartik, Use session_id(), it returns an empty string ...READ MORE

answered Apr 1, 2020 in PHP by Niroj
• 82,840 points
5,740 views
0 votes
1 answer

How to see indexes for a database or table in MySQL?

Hello @kartik, To see the index for a ...READ MORE

answered Aug 18, 2020 in PHP by Niroj
• 82,840 points
150,605 views
0 votes
1 answer

How to check if a string is JSON or not?

Hello @kartik, Use JSON.parse function isJson(str) { ...READ MORE

answered Aug 19, 2020 in PHP by Niroj
• 82,840 points
9,128 views
+1 vote
1 answer

What is the relationship between angularjs Scope with controller/view?

Let us consider the below block: <div ng-controller="emp"> ...READ MORE

answered Jan 20, 2020 in Web Development by Niroj
• 82,840 points

edited Jan 21, 2020 by Niroj 1,181 views
0 votes
1 answer

How can we avoid my php form from hacking?

Hii @kartik, If you want to know php ...READ MORE

answered Feb 13, 2020 in PHP by Niroj
• 82,840 points
2,606 views
0 votes
1 answer

What is a Cookie? How to create Cookies With PHP?

A cookie is often used to identify ...READ MORE

answered Feb 13, 2020 in PHP by Niroj
• 82,840 points
3,807 views
0 votes
1 answer

How to reload or re-render the entire page using AngularJS?

Hello @kartik< For the record, to force angular ...READ MORE

answered Jul 15, 2020 in Node-js by Niroj
• 82,840 points
5,147 views
0 votes
1 answer

How to Validate Form Data With PHP?

Hey @kartik, The first thing we will do ...READ MORE

answered Feb 13, 2020 in PHP by Niroj
• 82,840 points
3,356 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP