CSS Navigation Question

  • Resolved iselaespana

    (@iselaespana)


    10 years, 6 months ago

    Hello I am using a twenty ten child theme and would like to make my navigation look something like this:

    http://www.designdeck.co.uk/a/1215

    What I would like to know is if I can create this using css alone or if there is a easy way in achieving this outcome.

    I had considered adding a background gradient image to my #access and somehow adding a divider in between each nav text element.

    Any thoughts?

    I appreciate any help greatly.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    10 years, 6 months ago

    What I would like to know is if I can create this using css alone or if there is a easy way in achieving this outcome.

    CSS alone is the easy way thanks to generators http://www.colorzilla.com/gradient-editor/

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    10 years, 6 months ago

    and somehow adding a divider in between each nav text element.

    Use a left and right border instead, then remove the left border on the first and right on the last elements.

    Thread Starter iselaespana

    (@iselaespana)

    10 years, 6 months ago

    Thank you so much!!

    I just have one more question.

    If you see the website Im working on there is a left and right divider in each one except before the home | button. I would like for there to be one there too. How can I achieve this?

    Thanks in advance for all your help.

    website

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    10 years, 6 months ago

    Try;

    #access .menu-header li {
 border-left: 1px solid #DBD9DA;
}

    Thread Starter iselaespana

    (@iselaespana)

    10 years, 6 months ago

    Perfect! Thank you, this will come in handy for years to come! 🙂

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘CSS Navigation Question’ is closed to new replies.