In WOO Canvas, the top navigation is, by default, aligned left and flush with the top of the browser. I wanted it floated right, down a bit, and custom styled. Here’s a screencast walking through the steps to make that happen.
I’m using the Canvas child theme Fresh Canvas so my Canvas upgrades don’t break anything. I also did a bit of custom styling for a single menu item using the CSS class in the WP menu system. Works like a charm.
Overview
- Float menu area right
- Force background color to “transparent”
- Top margin to push it down a bit, negative bottom margin to pull back up anything under that got pushed down
- Custom CSS for one menu item
- Styling for menu items: bold, larger font, color
I used a combination of CSS and the WOO admin options.
I’ve never used CSS before, but I was able to tweak this to move my main navigation up in line with my logo. I have been puzzling for days how to do this – thank you very very very much
How do I centre it instead of putting it to the right? I tried ‘float: center’ but that didn’t work – in fact it cancelled out everything and put the menu back in its normal place!
I’ve solved it by aligning it left and giving it a wide margin. Which works OK, for what I’m doing. But would be good if it was possible to actually centre it
Hi Kirsty,
I’ve tried the same thing and centering never seems to work well (anywhere!). I’d do what you did. I wonder if something like ” margin-left: auto; and margin-right: auto; ” might work? Thanks for the comments.
Thanks, what got me was putting css styles in the main css file instead of custom.css
It’s weird that where you put it makes a difference, but I think different CSS files load in different order, so it does matter. Glad you fixed it.