Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #95980
    macwebster
    Participant

    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

    #96013
    Sakin
    Keymaster

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

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

    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.

    #96562
    phillycontemporary
    Participant

    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!

    #96567
    Sakin
    Keymaster

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

    #97369
    phillycontemporary
    Participant

    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?

    #97503
    Sakin
    Keymaster

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

    #97637
    Sakin
    Keymaster

    @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;
    }
    #98081
    phillycontemporary
    Participant

    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!

    #98115
    phillycontemporary
    Participant

    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!

    #98129
    Sakin
    Keymaster

    @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;
    	}
    }
    #99990
    strat76
    Participant

    THANKS for this as well

Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Converting Site header from fixed to floating’ is closed to new replies.