[macwebster]

Hi,

Can you advise if the header/masthead in Fabulous Fluid can be changed to a fixed position so that the page content flows under the site navigation as the viewer scrolls down? This similar to the Parallax and Clean Business themes. I would like to stay with the FFluid theme as it best suits the client.

I tried this: #masthead {position: fixed;} but it did not work fully.

Terrific new themes by the way. I am investigating updating a client from Catch Box Pro to Fabulous Fluid.

Thanks in advance, J Macwebster

[Sakin]

@macwebster: try adding following css in “Appearance => Customize => Theme Options => Custom CSS Options” box:

#masthead {
    position: fixed;
    width: 100%;
    z-index: 199;
}

[macwebster]

Almost there! The width and fixed position works. The header spans the full width and stays in position as the page scrolls.

However, the site header now covers page titles and on the home page it covers part of the featured grid. I tried adding margin-bottom 30px to the selector but it didn’t work.

[phillycontemporary]

Hi! I’m having the same issue. The site header covers part of the page titles and featured photos when fixed. Please let me know if there is a way to fix this!

[Sakin]

@phillycontemporary and @macwebster : Can you post in your site URL so that I can check in and suggest you the solution.

[phillycontemporary]

Hi Sakin,

I have a WP guest login you can use to see the site. Right now, I need to keep my ‘Coming Soon’ mode activated, but with this guest login I just created you will be able to see the site without any editing control.

Would that work for you? Whats the best way to give you the username and password for the guest account?

[Sakin]

@phillycontemporary: Ok I will email you and then you can reply me there with site URL and access.

[Sakin]

@phillycontemporary: As per your site, try following:

#masthead {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 199;
}
.site {
    margin-top: 88px;
}
.admin-bar #masthead {
    top: 32px;
}

[phillycontemporary]

Thank you! This worked!

When I view the site on a phone or tablet however, there is a bar of white space between the top of the page and the fixed menu. Is there any way to fix this and make the menu more responsive?

Thank you!

[phillycontemporary]

AH- I just realized that the fixed menu is relative to the bottom of the WP menu bar and not the top of the browser window! Would I go in and edit the ‘margin-top’ portion of the CSS you provided to fix this?

Thank you!

[Sakin]

@phillycontemporary: Yes, you can add the following css:

@media screen and (max-width: 990px) {
	.site {
    	margin-top: 70px;
	}
}
@media screen and ( max-width: 782px ) {
	.admin-bar #masthead {
	    top: 46px;
	}
}

[strat76]

THANKS for this as well

[Author]

Posts