Screencast Tuesday: Using Multiple Navigation Blocks with the Visual Editor and CSS

It’s very unusual for me to be up at 6:00EST since I’m usually up late working when most of the U.S. is sleeping (that’s really when I can get a lot of work done). This morning I started up the coffee maker and started looking at posts that came in last night to see what needed answering on the forums. What I found was a few different threads with people wanting to know how to style multiple navigation blocks on the same page. There’s limitations in doing this within the Visual Editor, so it does require writing some CSS. In today’s Screencast Tuesday, we’re taking a look at how I go about solving this issue.

Now that you’ve got a good idea of how style multiple navigation blocks, take some time to check out the links below to help you further your skills in CSS. If you want a fun interactive training dealing with HTML5 and CSS3, I highly recommend taking a look at this training by CodeSchool. It’s great for beginner and novice alike! I did it as a refresher and found it very useful! And even I learned a few things! 😉 I also provided you with a list of resources I use quite often for learning CSS, or pick up new techniques on things.


Spread the word!

4 Responses

  1. Thanks AJ,

    How do you style a menu with sprite button images? Also, when should you use a widget block or custom html block to make a navigation menu?

  2. Thanks! I am also working on a sprite menu, now that I see how to select everything I’ll let you know how it goes.

  3. Good tips – thanks, but what if I want to specifically target one menu link with the same navigation bar. For example, to put a distinct image next to each menu link, or to have a different hover effect for each menu item. Thanks!

  4. Not good news here for those that have been using Headway 2. There were good design features incorporated into Visual Editor 2.0 without having to use CSS. I don’t particularly want to learn CSS. Understand it, yes, but not use it.
    What’s the route forward?Go back to Headway 2.0?

Leave a reply

Copyright © 2016 Vesped Inc. All Rights Reserved. Proudly Powered by Headway and WordPress