New Landing How can we help? Themeforest Theme Support Joyn Top bar navigation style change

Viewing 15 posts - 1 through 15 (of 20 total)
  • Posted in: Joyn
  • #305592
    marmaneous
    Member
    Post count: 22

    I’d like to change the homepage navigation style when the header is just transparent. As is, the selected home page is dark grey and the other pages are white. When you scroll down they all become darker grey and it looks fine. But the background image I am using makes the “home” text be hard to read. Is there any way to change this to white text when there is no scrolling and someone is at the top of the page and have the style change when scrolling occurs? I also want hover on other items in the navigation to be the white version when it’s a transparent header. Is that possible as well?

    #305619
    Rui Guerreiro – SUPPORT
    Keymaster
    Post count: 25779

    Hi,

    Can you add the code below to your custom css option

    .current_page_item span {
        color: #b3a8a8;
    }
    
    .is-sticky .current_page_item span {
        color: #2c2c2c;
    }

    See if this works for you.

    -Rui

    #305621
    marmaneous
    Member
    Post count: 22

    That didn’t work. Seems like everything still looks the same.

    #305622
    Rui Guerreiro – SUPPORT
    Keymaster
    Post count: 25779
    This reply has been marked as private.
    #305680
    marmaneous
    Member
    Post count: 22

    Yes but when you scroll the text is still white. I want it to change to black like the rest of them.

    #305996
    David Martin – Support
    Moderator
    Post count: 20834

    I see this:

    Have you changed the page or resolved this?

    #306151
    marmaneous
    Member
    Post count: 22

    So I see the change now, however I want the top border to appear white when the header is transparent. Also, when you hover over the other links other than Home, they remain white text but have a white top border appear over them as well.

    #306153
    marmaneous
    Member
    Post count: 22

    Also this code

    
    .current_page_item span {
        color: #fff;
    }
    

    On other pages other than the home makes the current page heading in the nav white text as well when it’s at the top of the page, thereby blending into the background of the header. It only reappears once you start scrolling. I believe it’s still pulling the same code from the home page, but this time the top isn’t transparent it’s white as well.

    #306356
    David Martin – Support
    Moderator
    Post count: 20834

    White Hover Text & White Hover Border (Top) – On A Naked Header And Homepage Only:

    .home .page-header-naked-light .sticky-wrapper:not(.is-sticky) nav .menu > li.menu-item > a:hover, .home  .page-header-naked-light .sticky-wrapper:not(.is-sticky) nav.std-menu .menu > li > a:hover {
       
      color: #fff!important;
    }
    
    .home  .page-header-naked-light .sticky-wrapper:not(.is-sticky) nav.std-menu .menu > li:hover > a,
    .home  .page-header-naked-light .sticky-wrapper:not(.is-sticky) nav.std-menu .menu > li:hover > a {
        box-shadow: 0 5px 0 rgba(255,255,255, 1) inset!important;
    }
    #306467
    marmaneous
    Member
    Post count: 22

    Alright great that works perfectly! Now how do I fix the invisible current page item when I am visiting other pages other than the home page when I am not scrolling? Visit any other page other than home and don’t scroll to see what I’m talking about.

    #306470
    Rui Guerreiro – SUPPORT
    Keymaster
    Post count: 25779

    Also add this code.

    .current_page_item span {
        color: #2c2c2c;
    }

    -Rui

    #306471
    marmaneous
    Member
    Post count: 22

    This reverts the home page current item to #2c2c2c as well. :/ is there any way to make a page-id exception for this code, since the home page is the only I need to work like this?

    #306474
    Rui Guerreiro – SUPPORT
    Keymaster
    Post count: 25779

    I’m only seeing the homepage with #2c2c2c in the current item only when you scroll and enter in the sticky but that is affected by the rule below and not the one I provided.

    .is-sticky .current_page_item span {
        color: #2c2c2c;
    }

    To change the color of the current item only in the homepage and in the sticky mode use this code.Change to the desired color.

    .home .is-sticky .current_page_item span {
        color: #2c2c2c;
    }

    When the homepage loads this is what I’m seeing.
    https://www.dropbox.com/s/6yq4zwuesyuwfzi/Screenshot%202016-12-13%2018.23.46.png?dl=0

    -Rui

    #306476
    marmaneous
    Member
    Post count: 22

    Hmmmm, so there seems to be a confusion (sorry for being so difficult) but what is the total code that needs to be entered to have a white text navigation on the top with no scroll and hover generates a white top padding not #2c2c2c, and when scrolling or on any other page (scrolling/no scrolling) the original header is there with nothing invisible. I don’t know how else to depict what I am trying to accomplish but basically I want all the regular functions of my original header on all other pages and when I am scrolling on the homepage but when I am not scrolling on the homepage I want transparent header, white text and white hover. That’s it. :/

    #306477
    marmaneous
    Member
    Post count: 22

    We have gone back and forth so it’s confusing to see which code is needed and not needed unless all of it is needed?

Viewing 15 posts - 1 through 15 (of 20 total)

You must be logged in and have valid license to reply to this topic.

License required for the following item
Login and Registration Log in · Register