Text color change of Navigation Bar

• 

  muhammadmustafaa · Member · Jan 21, 2018 at 6:59 am

  • Copy link
  • Add topic to favorites

  Hello, after using few codes I was able to have a sticky nav bar. Now I want to change the color of text, how do you do it?

  Also, i want to change the color of 3 bars menu in mobile version.

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Jan 22, 2018 at 7:21 pm

  • Copy link

  Hi @muhammadmustafaa, I noticed when I go to your site logged in, the menu and top edge of your logo is hidden behind the admin bar, and also that your menu completely disappears for some screen widths, so I’ve made a couple of changes to the code you have. Replace the nav related CSS rules with the following and see what you think.

  @media screen and (min-width: 988px) {
  .navbar {
   background:#fff;
   height:70px;
   z-index:170;
   margin:0 auto;
   box-shadow:1px 1px 25px #000;
   width:100%;
   position:fixed;
   top:0;
   left:0;
   right:0;
   text-align:center
  }
  .logged-in .navbar {
    top: 32px;
  }
  }
  .main-menu a, .main-menu > ul > li:hover > a, .main-menu > ul > li.current-menu-item > a, .main-menu > ul > li.current-menu-ancestor > a {
    color: #cc0000;
  }

  The last one is the color for the menu labels. You can edit as desired.

• 

  muhammadmustafaa · Member · Jan 22, 2018 at 8:43 pm

  • Copy link

  Thanks. that worked but only for desktop and I was also trying to get get white bar on phone and other devices. Also when I have a white top bar on phone 3-line menu bar shows white color?

• 

  thesacredpath · Member · Jan 22, 2018 at 8:50 pm

  • Copy link

  Ah, so are you wanting the top white bar to be fixed and white both on desktop and mobile?

• 

  muhammadmustafaa · Member · Jan 22, 2018 at 8:52 pm

  • Copy link

  Yeah. please help me with that.

• 

  thesacredpath · Member · Jan 22, 2018 at 10:03 pm

  • Copy link

  Many thanks for the clarification. Replace what I had given you above with the following. You can edit the border-color. That is what controls the color of the menu toggle lines.

  .navbar {
    background:#fff;
    height:90px;
    z-index:170;
    margin:0 auto;
    box-shadow:1px 1px 25px #000;
    width:100%;
    position:fixed;
    top:0;
    left:0;
    right:0;
    text-align:center
   }
   .logged-in .navbar {
    top:32px
   }
  .main-menu a,.main-menu > ul > li:hover > a,.main-menu > ul > li.current-menu-item > a,.main-menu > ul > li.current-menu-ancestor > a {
   color:#000
  }
  .menu-toggle::before {
    border-color: #cc0000;
  }
  @media screen and (max-width: 782px) {
    .logged-in .navbar {
      top: 50px;
    }
  }

• 

  muhammadmustafaa · Member · Jan 22, 2018 at 10:15 pm

  • Copy link

  Thanks a lot. That worked perfectly fine

• 

  thesacredpath · Member · Jan 22, 2018 at 11:08 pm

  • Copy link

  Awesome, and you are welcome!