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
2,059 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,760 points
507 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,760 points
1,708 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,760 points
3,516 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,760 points
1,557 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,760 points

edited Jan 21, 2020 by Niroj 243 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,760 points
836 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,760 points
1,119 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,760 points
556 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,760 points
625 views
0 votes
2 answers

Define a SQL query? What is the difference between SELECT and UPDATE Query? How do you use SQL in SAS?

HI.. SQL is Structured Query Language, which is ...READ MORE

answered Aug 8, 2020 in PHP by anonymous
2,526 views