Navigation
Archive / 2 navigation menus 2 css settings – different on the home page
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • January 4, 2017 at 11:49 pm #1316936
    pixie
    Participant

    Hi Xteam,

    Hoping to get a final blast of help aligning our transparent navigation menus.

    Currently we have 2 main navigation menus set up, 1 for the home page (with anchors for one page story telling design) and then a second main navigation (looks the same but with links to more detailed pages) on all the other pages of the website. Your amazing team helped us style the first one on the home page and the second one has assumed those settings – we are hoping you can now assist in some coaching towards css that is slightly different for the second navigation and the alignment of both menus with the CS sections below.

    Home page – Main Nav (Primary Menu)

    1] how do we change the background color of this after it changes from transparent to a color?
    2] in mobile view it seems there is a small gap between the bottom of the navigation menu block of color and where it should be sitting as it slides down. On bigger screens it slides down to the perfect position, on mobile it is sits just above the section with the anchor.

    All other pages – Page Nav

    3] Because of our initial request on the home page to have the nav start 100% transparent at the top of the page and then have a 50% background color for the rest of the page we ran into visibility issues on the rest of the pages as the pages have a large white block at the top of the design, this + full transparent nav bg and white text meant we could not see any of the navigation.

    Could we change the logo color and nav bar text to a color (only on this second menu) so that would display better in the above full transparent setting…

    OR

    Is it possible to have a second navigation bar css setting for this second nav menu that would allow it to always have a color background (no 100% transparency at the top of the page)

    4] in Mobile mode this one covers the the first headline on the page – should we add a mobile visible only section of white above the first CS section to avoid this?

    Looking forward to your insights – thank you 🙂

    January 5, 2017 at 12:07 am #1316941
    pixie
    Participant
    This reply has been marked as private.
    January 5, 2017 at 4:06 am #1317121
    Christian
    Moderator

    Hey there,

    1. Please change the rgba value of background color

    .site .x-navbar.x-navbar-fixed-top.white {
    background-color: rgba(0,0,0,0.75) !important;
}

    See http://www.css3maker.com/css-3-rgba.html for more details

    2. Can you give us a screenshot and further details of the issue?

    3. Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. You might want to contact our trusted partners who caters X setup and customization needs. Please see https://community.theme.co/custom-development/

    The best solution though would be to change your section’s background.

    4. Please add a Gap element that is visible only on mobile above your headline. Use the Gap’s Hide Base on Screen Width option.

    Thanks.

    January 5, 2017 at 4:34 am #1317146
    pixie
    Participant
    This reply has been marked as private.
    January 5, 2017 at 4:36 am #1317149
    pixie
    Participant

    and one last request to go along with #3 please – the current/active page link is not visible behind the CS brown segment – can you please advise how to adjust this one color. Active color on the original homepage nav is green – but these one are invisible ~ Thank you 🙂

    January 5, 2017 at 7:59 am #1317309
    Paul R
    Moderator

    Hi,

    You can add this under Custom > CSS in the Customizer.

    
.x-navbar {
    background-color: #000 !important;
}

.x-navbar .desktop .x-nav > li > a:hover > span, 
.x-navbar .desktop .x-nav > li.x-active > a > span,
.x-navbar .desktop .x-nav > li.current-menu-item > a > span {
    color: red;
}

    Change red with the color that you like.

    Hope that helps

    January 5, 2017 at 1:16 pm #1317695
    pixie
    Participant
    This reply has been marked as private.
    January 5, 2017 at 8:44 pm #1318313
    Rue Nel
    Moderator

    Hello There,

    Thanks for updating in! The remaining spaces will only occur if you are logged in. That is because there is some enough for the WordPress Bar visible only if you are logged in. If you are logged out and the WordPress Bar is not showing, the space is not present hence clicking on the scroll to content will be in the correct position.

    To resolve your additional question, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

    body:not(.home) .x-navbar-wrap {
    background-color: hsl(20, 12%, 20%);
    margin-bottom: 0;
}

    http://prntscr.com/ds2isg

    Hope this helps.

  • Author
    Posts
  • <script> jQuery(function($){ $("#no-reply-1316936 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>