Jump to content

Archived

This topic is now archived and is closed to further replies.

leftcoastmichael

Menu bar icon overlap wanted

Recommended Posts

leftcoastmichael

For design purposes, I'd like to have the icon in my menu bar actually overlap the menu.  Is this possible with local code? Speaking of which, I'd like to use a custom color.

 

Here's what I'm looking to achieve.  Any suggestions would be welcome!

 

 

Share this post


Link to post
Share on other sites
Rob

Usually, that overlay method is accomplished with graphics. Make a background image with a white edge at the bottom. It should be as tall as the total height of the menu, plus as many pixels as the bottom, visible portion of the overlay, and probably a few to spare. Use the image you provided to create it easily by copying a slice and pasting as a new editor in your graphics program.  Upload and use it as the background for the menu.

 

Your round icon will overlay it, extending below the blue bit, over the white, creating the desired effect.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
leftcoastmichael

Thanks, Rob!  I'm also looking for a way to have child navigation directly below it (instead of cascading menu's); white is fine. Can I position that so that it's 'above' or 'on top of' the overlaying white portion of the primary navigation bar?

Share this post


Link to post
Share on other sites
Rob

I don't think it can overlay another section, if that's what you're asking.

 

I don't believe you can make the child menu items on one line below the current menu. That said, Ubermenu (a 3rd party premium plugin) can display some child menu items in a row below the main menu.  See the menu in my own site at http://dev.epicurus.com


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
leftcoastmichael

Thanks. Yes I like your treatment, also the Breadcrumbs. I was able to achieve the same just by dropping in a Breadcrumbs widget and a Simple Nav into a two-column container, as shown here.  What's missing, though is having the selected menu items remain highlighted. Here you can see from the Breadcrumbs that I'm on the Products -> SmartPad page, but I'd really like to have both "Products" (on the main menu) and "SmartPad" (on the child menu) highlighted. Otherwise - even with breadcrumbs - the user feels lost. 

 

Can I add CSS to show highlights? If so - how?

 

g2zk52K.jpg

Share this post


Link to post
Share on other sites
Rob

In SImple Nav, I'm not sure what's possible, but, if you go to Dashboard > Appearance > Menus, click Screen Options.

Check the box for CSS Classes.

Select the menu assigned for Simple Nav.

Edit each menu item and add this class:

mysimpnav1

 

Then, use that class to write the CSS to allow a background on hover.

 

Use the resources of http://www.w3schools.com/css/  to find the proper construction to add to

.mysimpnav1


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
leftcoastmichael

Thanks again!

Share this post


Link to post
Share on other sites
Rob

You're very welcome indeed!


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

×