How to Eliminate the "Ruberbanding Menu" at the top of ASPIRE PRO

Tagged: menu

This topic has 4 replies, 3 voices, and was last updated 4 years ago by dreamingspires.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Posts
May 14, 2019 at 6:40 pm #23188

Bamajr
Customer

I already posted this in the StudioPress Community, before I realized I should have posted this here.

Aspire Pro is an Appfinite theme, so, I’m reposting the same question from: https://studiopress.community/topic/how-to-eliminate-the-ruberbanding-menu-at-the-top-of-aspire-pro/ here.

I’m trying to remove the “Ruberbanding Menu” at the top of the ASPIRE PRO theme. I thought it may be accomplished similar to the way it could be done in the Centric Pro theme (See: https://studiopress.community/topic/shrink-in-centric-pro/)?

However, I have tried modifying the filter I provided at the above link, but it does not have the same effect.

May 16, 2019 at 3:24 am #23191

Wes
Moderator

Do you have a link to your site? Which version are you using?

Can you explain what you mean by “Ruberbanding”? I may know what you’re talking about, but probably have a different name for it. I just want to make sure I provide the right solution.

May 16, 2019 at 1:49 pm #23193

Bamajr
Customer

Sorry, I thought I included all that info; maybe on the StudioPress Forum.

The website is: https://tyrochristian.org/
The version is: 1.2

The “Ruberbanding” I’m referring to is in the top/main menu; it starts large and then reduces in size when you scroll down on the page. I want the menu to be the small version, all the time and never have any motion with it.

Does that make sense or not?

May 18, 2019 at 6:16 am #23198
Wes
Moderator
Ok, to change the shrinking effect, you can adjust the padding-top on line 1201 in your style.css –
```
.site-header.light {
	background-color: #000;
	padding-top: 0;
}
```
The padding-top reduces to 0 which is what is removing the space from the top. If you prefer to have the space removed up top and when you scroll down, then you can change the padding to 0 on line 1196 –
```
.front-page .site-header {
    border-bottom: 1px solid #ddd;
    padding-top: 30px;
}
```
To set the logo size smaller, change the height to 56px on line 1255 –
```
.header-image .site-title > a {
    background-size: contain !important;
    display: block;
    height: 56px;
    text-indent: -9999px;
}
```
That will make the logo stay at 56px height both at the top and when you scroll down (when the shrinking effect kicks in).

Let me know if that helps.
May 21, 2019 at 10:26 pm #23204

dreamingspires
Customer

Hi Wes

My client would like to have the primary menu bar background black when you first visit the home page. Currently the background only kicks in when you start scrolling down. How can I make that happen.

Thank you in advance
Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.