Hide logo on scroll

This topic has 6 replies, 2 voices, and was last updated 9 years by sharmstr.

Author

Tagged: hide logo
July 21, 2015 at 17:18 #69301

mikenoises
Participant

Hi,

Rather than resize the logo when I scroll down the page, I want to hide it and display only the main nav to save room.

July 21, 2015 at 18:24 #69311

sharmstr
Moderator

Try this in quick css

.header-scrolled .navbar-header .logo {
display: none;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

July 21, 2015 at 21:22 #69333

mikenoises
Participant

The logo still resizes then disappears. I’d prefer if the logo just stayed fixed on the page and the menu moved up to the top. Also it would be good of the nav had the same padding on the top as it does on the bottom.

Take a look: http://thegrow.co/about/

July 22, 2015 at 00:30 #69341

sharmstr
Moderator

Cant see it without logging in.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

July 22, 2015 at 00:56 #69348

mikenoises
Participant

sorry, here’s a gif. Can’t make the site live yet.

Attachments:
You must be logged in to view attached files.

July 22, 2015 at 14:28 #69427

sharmstr
Moderator

I assumed you were using the default header layout because you didnt say differently 🙂 I’ll get back to you on this.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com
July 23, 2015 at 15:32 #69641

sharmstr
Moderator
Try this
COPY CODE
```
.header-centered .navbar-collapse .navbar-nav {
	height:inherit;
}

.navbar-header .logo {
	height:88px;
}

.header-scrolled .navbar-header {
    float: left !important;
	height: 88px !important;
    line-height: 88px !important;
}

.header-scrolled .navbar-collapse {
    float: right !important;
}

.header-scrolled .navbar-collapse .nav.navbar-nav {
    line-height:88px !important;
}
```
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com
Author

Posts