Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. General Discussion
  3. nav bar color change on different pages

nav bar color change on different pages

Scheduled Pinned Locked Moved General Discussion
9 Posts 4 Posters 161 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • B Offline
    B Offline
    Brief
    wrote on Nov 28, 2023, 2:56 AM last edited by
    #1

    Hello everyone,

    I have seen this question asked before but did not find an answer. The navbar menu on my home page is grey. On my about page the page background colour is a pink/peach colour. I need the nabber menu colour to change to pink/peach on that page. Would also like to do this to other pages that I add that are different colours.

    Could someone please help. I just realized I have been using this platform for over 5 years for several projects 'thumbs up'

    Thank you so much.

    Best,

    Thomas

    Site I am working on:

    http://strathcona-homes.ca

    1 Reply Last reply
    0
    • B Offline
      B Offline
      Brief
      wrote on Nov 28, 2023, 3:03 AM last edited by
      #2

      I am referring to the menu bar color, sorry if it's unclear what I am referring to.

      1 Reply Last reply
      0
      • P Offline
        P Offline
        panteley
        wrote on Nov 28, 2023, 11:54 AM last edited by
        #3

        image.png

        1 Reply Last reply
        0
        • P Offline
          P Offline
          panteley
          wrote on Nov 28, 2023, 12:59 PM last edited by
          #4

          Consider hiding it.

          1 Reply Last reply
          0
          • B Offline
            B Offline
            Brief
            wrote on Nov 28, 2023, 8:40 PM last edited by
            #5

            thank you but I want to have the effect of having content flow behind it.....
            just need code for custom color on a particular page...

            1 Reply Last reply
            0
            • M Offline
              M Offline
              maxkesslau
              wrote on Nov 29, 2023, 2:44 PM last edited by maxkesslau Nov 29, 2023, 9:46 AM
              #6

              This is easily doable with a tiny bit of css, just add an html element to the page you want your navbar color changed on, and put in

              <style>
              .navbar{
                   background-color: your color of choice goes here in whatever format you like;
              }
              </style>
              

              If that does not work, add a !important after the color and before the semicolon.

              d77e87d2-44e1-4f65-b74b-daaba09f903b-image.png

              1 Reply Last reply
              1
              • A Offline
                A Offline
                arminunruh
                Global Moderator
                wrote on Nov 29, 2023, 4:35 PM last edited by
                #7

                very good answer
                also read this https://laytheme.com/documentation/custom-css-styling.html#css-based-on-current-page

                1 Reply Last reply
                0
                • B Offline
                  B Offline
                  Brief
                  wrote on Nov 30, 2023, 4:13 AM last edited by
                  #8

                  Thank you. I will try it out.

                  1 Reply Last reply
                  0
                  • B Offline
                    B Offline
                    Brief
                    wrote on Nov 30, 2023, 5:23 AM last edited by
                    #9

                    Amazing!!!! Works great.

                    1 Reply Last reply
                    1
                    Reply
                    • Reply as topic
                    Log in to reply
                    • Oldest to Newest
                    • Newest to Oldest
                    • Most Votes

                    2/9

                    Nov 28, 2023, 3:03 AM

                    7 unread

                    I also code custom websites or custom Lay features.
                    💿 Email me here: 💿
                    info@laytheme.com

                    Before you post:
                    1. When using a WordPress Cache plugin, disable it or clear your cache.
                    2. Update Lay Theme and all Lay Theme Addons
                    3. Disable all Plugins
                    4. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"

                    This often solves issues you might run into

                    When you post:
                    1. Post a link to where the problem is
                    2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
                    3. If the problem is difficult to explain, post screenshots / link to a video to explain it
                    Online Users
                    C
                    craigfeldspar
                    less than a minute ago
                    N
                    nuotio
                    10 minutes ago
                    Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
                    laytheme.com
                    • Login

                    • Don't have an account? Register

                    • Login or register to search.
                    2 out of 9
                    • First post
                      2/9
                      Last post
                    0
                    • Recent
                    • Tags
                    • Popular
                    • Users
                    • Search