• Hi,

    I want to edit the CSS of the custom navigation menu in my sidebar on this page. No idea where to actually begin.

    Thanks in advance.

Viewing 12 replies - 1 through 12 (of 12 total)
  • Hello!

    What kind of changes are you wanting to make?

    Thanks,
    brenda

    Thread Starter Jue

    (@jue)

    I wanted to make it look appealing to the eye. Perhaps make it look like an actual menu instead of just standard html links that it looks like now.

    Thread Starter Jue

    (@jue)

    Hi Brenda,

    Any ideas? Thanks.

    Hello!

    Ok, I played around with some ideas to set that menu area apart from the items below it. Try this in your Custom CSS and see if that changes things–or maybe its a place to start!

    .menu-afc-chorley-container {
       padding-bottom: 13px;
       margin-bottom: 45px;
       padding-left: 74px;
       }
    .widget nav_menu-2 {
       background-color: #f9f9f9;
       }
    .widget nav_menu-2 H4 {
       background-color: #ff000;
       padding-left: 60px;
       }
    ul#menu-afc-chorley .menu li {
      padding-top: 8px;
      font-size: 16px;
      }
    aside ul li {
      list-style-type: square;
      }

    Give that a go and let me know how that looks!

    Thread Starter Jue

    (@jue)

    Hi,

    Thanks for that. I’ve put that in but it doesn’t seem to have done much apart from give it a bullet point.

    I’m sorry! Would be easier if I was actually on your site instead of using the inspector…but here is what it looked like on my end – Image

    For the first rule, try changing the selector from .menu-afc-chorley-container to .widget and you should see better spacing. The other suggestions look great.

    Thread Starter Jue

    (@jue)

    That changed ALL of my widgets, not just the AFC Chorley one.

    BjScott, that image looks perfect for a starter. Not sure why it’s not working like that my end.

    I hope you can get it to work….that was my goal, to set that one menu area apart from the widgets below….

    Wonder what Im missing in that code? Someone else help! πŸ™‚

    Sorry, I didn’t see any mention of wanting just the first widget set apart from the others, I thought you would want all of them equally spaced. For example, the Our Sponsors title is butt-up against the Latest News widget.

    In the second and third rules, change the selector to this: .widget.nav_menu-2. When you are selecting multiple classes on the same element, you just join them together without an intervening space (and the nav_menu-2 selector was missing the starting period).

    In the third rule, add another zero to the end of the background-color value:
    #ff0000.

    Thank you CrouchingBruin!

    Thread Starter Jue

    (@jue)

    Thanks for your help!

    Good starting point.

Viewing 12 replies - 1 through 12 (of 12 total)

The topic ‘Edit Sidebar Custom Menu CSS’ is closed to new replies.