- This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
Viewing 3 posts - 1 through 3 (of 3 total)
- The forum ‘Design’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Hi!
I am quite new to css – have just been playing with changing colors and backgrounds and headers so far. I would like to be a bit more adventurous and I would like to learn how to make navigation menus more interesting. I generally work on the genesis platform with various child themes.
One thing that I would like to be able to do is design custom menu backgrounds so that they overlap the header. Kind of along these lines http://freedesignfile.com/upload/2012/08/00229887_medium31.jpg where something will stick up over the top or bottom of the menu. Kinda hard to explain!
How would I go about doing something like that?
Thank you for your help!
You give the big background to the wrapping tag.
Then, to the tag, you apply the hover selector (a:hover {}) and give the style, some of the examples there are just gradient backgrounds with round borders (you can easily get the styles for that at http://css3gen.com/).
For the ribbon hover, you’ll have to use :before and :after selectors,
so, you do a:hover:before { content: “”; display: block; position: absolute } to create an element to use at both borders (here’s a more extense explaination of those selectors http://coding.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/). With them you create the flexible borders and then to the a you apply a flexible background.
I hope I was clear :/
Thank you for the good explanation! I think some of that is beyond me at this stage, but I will definitely experiment and play with what you suggested – it might be easier to grasp when I actually see what it all does in practice.