CODEWITHSUNDEEP
htmlcss
user7356260
user7356260

Reputation:

Shrinking navbar when scrolling down, without using Javascript

How can get a navbar at the top of the page that shrinks when a visitor scrolls down, and without using Javascipt?

This is done here, for example. It would be fine for it to shrink discretely from wide to narrow, rather than shrink continuously as on that site.

(I don't this is a duplicate, because I am specifically asking for this to be done without using Javascript.)

Upvotes: 1

Views: 1576

Answers (2)

Edison Augusthy
Edison Augusthy

Reputation: 1523

i this this will help you

/*Strip the ul of padding and list styling*/
ul {
	list-style-type:none;
	margin:0;
	padding:0;
	position: absolute;
}

/*Create a horizontal list with spacing*/
li {
	display:inline-block;
	float: left;
	margin-right: 1px;
}

/*Style for menu links*/
li a {
	display:block;
	min-width:140px;
	height: 50px;
	text-align: center;
	line-height: 50px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #fff;
	background: #2f3036;
	text-decoration: none;
}

/*Hover state for top level links*/
li:hover a {
	background: #19c589;
}

/*Make dropdown links vertical*/
li ul li {
	display: block;
	float: none;
}

/*Prevent text wrapping*/
/*Style 'show menu' label button and hide it by default*/
.show-menu {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-decoration: none;
	color: #fff;
	background: #19c589;
	text-align: center;
	padding: 10px 0;
	display: none;
}

/*Hide checkbox*/
input[type=checkbox]{
    display: none;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
    display: block;
}


/*Responsive Styles*/

@media screen and (max-width : 760px){
	/*Make dropdown links appear inline*/
	ul {
		position: static;
		display: none;
	}
	/*Create vertical spacing*/
	li {
		margin-bottom: 1px;
	}
	/*Make all menu links full width*/
	ul li, li a {
		width: 100%;
	}
	/*Display 'show menu' link*/
	.show-menu {
		display:block;
	}
}
	<label for="show-menu" class="show-menu">Show Menu</label>
	<input type="checkbox" id="show-menu" role="button">
		<ul id="menu">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Portfolio </a></li>
		<li><a href="#">News</a></li>
		<li><a href="#">Contact</a></li>
	</nav>

Upvotes: 0

Obsidian Age
Obsidian Age

Reputation: 42334

What you are asking for is unfortunately outright impossible without JavaScript, as CSS has no way of knowing when the users scrolls down the page.

However, it is possible to shrink a header based on cursor position (which is almost the same thing) in pure CSS. See this answer by Mr Lister.

Hope this helps!

Upvotes: 1

Related Questions