x

Question

Good afternoon everyone, I was just wondering if there was a way I could change my subnaviagation menus to seperate colors in my weebly using html and css if anyone knows how to do that please reply to me ASAP and here is the link to my website https://thehiddencityfam.weebly.com/

Thanks so much in advance

VedaGirl

Tags (2)
3,286 Views
Message 1 of 8
Report
7 REPLIES 7
Square

Thanks for your post, @VedaGirl. If you post a link to your site I'm sure that someone can come up with a solution for you. Smiley Happy

3,241 Views
Message 6 of 8
Report

I Just Added My Website Link To My Question

Tags (1)
3,240 Views
Message 6 of 8
Report
Square

Thanks for doing that, @VedaGirl! @seicolewgr @PaulMathews, any thoughts on changing the background color of submenus for the site linked above? 

3,228 Views
Message 6 of 8
Report
Square

Thanks for the fast solution, @PaulMathews!

3,221 Views
Message 6 of 8
Report

You can change the background color of the Weebly fly-out menus with a little modification to the css:

  1. In the Site Editor, click on "Theme" in the top menu navigation. Then click the "Edit HTML/CSS" button at the bottom of the left-hand sidebar.
  2. By default, you'll arrive at the site's css window in the Code Editor. Click the magnifyiing glass at the top of the code window, enter the search term "#wsite-menus .wsite-menu" (without the double-quotes), and hit enter. You should arrive at the code block below. Modify the background color attribute in that block (highlighted in red text). In this particular example, I've changed the default white color of the menu background (hex code #ffffff) to the hex code for green (#00ff00), however, you can choose whatever color you wish (Google "hex codes" for help with what colors are produced by what hex codes).
#wsite-menus .wsite-menu {
    position: relative;
    background: #00ff00;
    -webkit-box-shadow: inset 0px 0px 0px 1px #E1E4E6;
    -moz-box-shadow: inset 0px 0px 0px 1px #E1E4E6;
    -ms-box-shadow: inset 0px 0px 0px 1px #E1E4E6;
    box-shadow: inset 0px 0px 0px 1px #E1E4E6;
}
3,223 Views
Message 9 of 8
Report

Can someone please delete this reply cause I did this accidently

3,184 Views
Message 9 of 8
Report

So I did follow your instructions excatly@PaulMathews and when I typed in the "#wsite-menus .wsite-menu" in the search bar without the quotation marks and pressed enter it didn't take me to the code block that you had listed above and nothing happened so what do I do now? please reply back to me soon!

Thanks so much in advance

Veda

3,176 Views
Message 9 of 8
Report