Navigation
Archive / 2 navigation bars
This is archived content. Visit our new forum.

Tagged: 

1 2
  • Author
    Posts
  • January 10, 2017 at 3:15 pm #1324527
    pixie
    Participant

    Hi Team,

    Trying to wrap my head around this part of X, the amazing option to have 2 navigation bars from inside the menu option / page settings – LOVE it!

    I have it set up so the primary menu is the one page home navigation and the secondary menu is the navigation for the rest of the pages on the site – works great but I would like to style them each differently – bg color, logo color, color and hover color etc.

    Can you point me to the css selectors that would get me started in the process of styling these 2 menus differently please.

    Thank you 🙂

    January 10, 2017 at 6:51 pm #1324821
    pixie
    Participant

    quick update – I did manage to follow these instructions for updating a second navigation logo:
    https://community.theme.co/forums/topic/different-logo-on-custom-page/

    Worked great.

    Now I need to edit the background color, text color and text hover color on all pages of the site without effecting the settings on the home page (primary) navigation menu.

    January 10, 2017 at 6:53 pm #1324825
    pixie
    Participant
    This reply has been marked as private.
    January 10, 2017 at 11:27 pm #1325035
    Rupok
    Member

    Hi there,

    Thanks for writing in! You can add this under Custom > CSS in the Customizer.

    .page-id-521 .x-navbar.white:not(.x-navbar-fixed-top) {
  background-color: #333 !important;
}
.page-id-521 .menu-item.current-menu-item a span {
  color: rgb(164, 191, 125)!important;
}

    Hope this helps.

    Cheers!

    January 10, 2017 at 11:41 pm #1325049
    pixie
    Participant

    Thank you Rupok.

    I added the above to the Global CSS without any change… can you double check for me that it is there?

    January 11, 2017 at 3:00 am #1325186
    Paul R
    Moderator

    Hi,

    I went ahead and adjusted the code.

    I change this

    
.x-navbar {
  background-color: transparent !important;
  border: 0;
  box-shadow: none;
}

    to

    
 .x-navbar {
  background-color: #333;
}
.home .x-navbar {
  background-color: transparent !important;
  border: 0;
  box-shadow: none;
}

    Please check.

    Thanks

    January 11, 2017 at 1:36 pm #1326044
    pixie
    Participant

    Thanks Paul.

    I found the change and changed the #333 to #fff and this indeed updated the navigation menu bar on the booking page and the home page navigation menu bar stayed the same – which is perfect and exactly what I was after, until I scroll and the dark grey color returns. Is is possible to adjust this after scroll color and the font colors on of the menu bar (on all the pages except the home page)

    Do you mind explaining how the .home . x-navbar does not change the home page but changes page 521 – so I can understand better how this works. I imagined if there were 2 menus, 2 navigation bars that there would be different css for both. Apologies if I am missing the obvious, appreciate your time.

    January 11, 2017 at 1:42 pm #1326053
    pixie
    Participant

    This is the css that is changing the text colors on the home page correct?

    /*nav bar hover */
    .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: #39312D;
    }

    .x-navbar.x-navbar-fixed-top.white li.current-menu-item > a > span, .x-navbar.x-navbar-fixed-top.white li > a:hover > span {
    color: rgb(164, 191, 125);
    }

    Is it the .desktop that we change to adjust all the other pages except the primary menu?

    January 11, 2017 at 1:46 pm #1326057
    pixie
    Participant

    And would it be easier if all the pages on the site were set to the primary menu and only the home page had the secondary menu (similar to how the 2 different logos were uploaded) The green logo uploaded to customize (normal logo upload workflow) and the change was made only to the front page – would that streamlined what we are trying to accomplish with these 2 menus?

    Interested in understanding the 2 menu options in X and how to style each in the most effective way.

    Can you point me to the css selectors that would get me started in the process of styling these 2 menus differently please.

    January 11, 2017 at 8:20 pm #1326560
    Friech
    Moderator

    Hi There,

    To change the navigation bar background-color and menu hover color on all pages except the home page, please add this on your custom CSS.

    body:not(.home) .x-navbar {
	background-color: rgba(0,0,0,0.75) !important;
}
body:not(.home) .x-navbar .x-nav > li > a:hover span,
body:not(.home) .x-navbar .x-nav > li.current-menu-item > a span {
	color: rgb(164, 191, 125) !important;
}

    Rest assured this code will never affect the home page.

    Hope it helps, Cheer!

    January 11, 2017 at 8:29 pm #1326572
    pixie
    Participant

    Thank you Friech,

    Interesting, I am trying to learn how this works as we go, not just from your teams guidance but also referencing the css training for the same online.

    I did add this code but it did not still the navigation menu is grey when I scroll down, white to start but then a scroll down is translucent grey like the home page. And I can only see one of the navigation button titles.

    End goal is to have the navigation menu bar on all pages except home (I know you get that;) white with grey text and then translucent white on scroll down.

    January 11, 2017 at 11:44 pm #1326779
    Friech
    Moderator

    Hi There,

    The issue seems to be something is converting the greater than sign with html entities. That is why the CSS did not work.


    screenshot

    I did tweak the code a little bit to correct its coloring.

    You can see that on Customizer.

    Make sure to clear your browser’s cache before previewing the site.

    Hope it helps, Cheers!

    January 11, 2017 at 11:48 pm #1326785
    pixie
    Participant

    Thank you Friech – there she is! So beautiful 🙂

    My mistake for coping and pasting from the email notification, so sorry about that.

    Is it easy to remove the bottom shadow until the scroll is initiated?
    And I noticed in my mobile testing today that the green logo pops up on the screens for a split second before the white logo on the front page covers it – is there css to prevent that from happening?

    January 12, 2017 at 12:29 am #1326823
    Paul R
    Moderator

    Hi,

    I checked your pages other than the homepage and the code seems to be working.

    It is white with grey text and then translucent white on scroll down.

    See Video – http://screencast.com/t/cGFoUo6fWItI

    Kindly clear your browser cache and check again.

    Thanks

    January 12, 2017 at 12:56 am #1326841
    pixie
    Participant

    Thanks Paul, Friech actually got it working above.
    Appreciate the follow up 🙂
    Your team is amazing!

    I noticed in my mobile testing today that the green logo pops up on the screens for a split second before the white logo on the front page covers it – is there css to prevent that from happening?

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