[Resolved] Different Header and Footer on Different Pages

Home Forums Support [Resolved] Different Header and Footer on Different Pages

Home Forums Support Different Header and Footer on Different Pages

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1420920
    John

    Hi,

    I’d like the logged-out header and footer on the pages of a membership site to be one color, and the logged-in header and footer of other pages to be another color.

    How can I do this?

    Thanks!

    #1420976
    Leo
    Staff
    Customer Support

    Hi there,

    I wonder if we can just use some CSS.

    The link to your site isn’t working for me.

    Can you double check?

    #1420996
    John
    #1421012
    Leo
    Staff
    Customer Support

    Any chance you can give a test username/password so I can login to see if there are any classes added to the logged in page?

    #1421033
    John

    Do you need administrative access?

    #1421036
    Leo
    Staff
    Customer Support

    Nope – just a login I can use on this page:
    https://www.leylatorresstudio.com/member-login/

    #1421059
    John

    REMOVED

    #1421069
    Leo
    Staff
    Customer Support

    Thanks!

    Try this to change the logged in color:

    body.logged-in .site-header, body.logged-in .site-info {
        background-color: #000
    } 
    #1421079
    John

    That took care of the Header, but not the footer.
    The background color for header navigation also has to be changed.

    #1421112
    Leo
    Staff
    Customer Support

    Edited the CSS above:
    https://generatepress.com/forums/topic/different-header-and-footer-on-different-pages/#post-1421069

    As for navigation colors, all the CSS is here:
    https://docs.generatepress.com/article/changing-navigation-colors/

    You just need to add body.logged-in in front of it to target the logged in condition.

    For example,

    .main-navigation .main-nav ul li a, 
    .main-navigation .menu-toggle {
    	color: #FFFFFF;
    }

    becomes:

    body.logged-in .main-navigation .main-nav ul li a, 
    body.logged-in .main-navigation .menu-toggle {
    	color: #FFFFFF;
    }
    #1421199
    John

    I’m not 100% sure this is right but the main nav had to edited to:

    body.logged-in .main-navigation, .main-navigation ul ul,
    body.logged-in .main-navigation .menu-toggle{
        background-color: #DDDDDD;
    }

    And this took care of keeping the hover color the same #DDDDDD

    body.logged-in  .main-navigation .main-nav ul li a {
        background-color: #DDDDDD;
    }
    #1421201
    Leo
    Staff
    Customer Support

    Awesome ๐Ÿ™‚

    #1421210
    John

    You’re a good and patient teacher, Leo.

    Thank you.

    #1422006
    Leo
    Staff
    Customer Support

    No problem ๐Ÿ™‚

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.