Text color change of Navigation Bar

  • Author
    Posts
  • #3067409

    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 prosperinbound.com.

    #3067672

    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.

    #3067679

    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?

    #3067680

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

    #3067681

    Yeah. please help me with that.

    #3067683

    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;
      }
    }

    #3067684

    Thanks a lot. That worked perfectly fine

    #3067685

    Awesome, and you are welcome!

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