Text color change of Navigation Bar

  • Unknown's avatar

    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)

  • Unknown's avatar

    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.

  • Unknown's avatar

    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?

  • Unknown's avatar

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

  • Unknown's avatar

    Yeah. please help me with that.

  • Unknown's avatar

    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;
      }
    }
  • Unknown's avatar

    Thanks a lot. That worked perfectly fine

  • Unknown's avatar

    Awesome, and you are welcome!

  • The topic ‘Text color change of Navigation Bar’ is closed to new replies.