styling extra menu with highlighting current page?

[tix]

I have a menu CSS that I use in adapted variations on many sites. It gives a tabbed menu with highlighted current page.
I can go on using it as it is, but noticed that it can give weird results on phones and small tablets + it would be easier to simply use it as extra menu instead.

How can I get this to work as extra menu with Xtreme Plus? (I noticed also that if you want only 1 border on an item, you can’t use shortened css, because that always gives 4 borders. )

#navlist{width:98%;height:35px;margin-left:auto;margin-right:auto;text-align:center;border-bottom: 3px solid #C9ACA8; border-style:double; margin-top:5%;margin-bottom:5%;padding-bottom: 12px; }
#navlist ul {width:98%;margin-left:auto;margin-right:auto;display: inline;list-style-type: none;margin:0;padding:0;text-align:center;border:0 !important;}
#navlist li {display: inline;list-style-type: none;margin: 0;padding: 5px 5px 20px 5px;border:0 !important;}
#navlist a:link, #navlist a:visited{background: #f3f3f3;border: 1px solid #C9ACA8;border-radius: 8px 0 0 0;color: #461511;float: left;font-family:”Josefin Slab”;font-size: 120%;font-weight: normal;line-height: 120%;margin-right: 8px;padding: 8px 12px 8px 12px;text-decoration: none;}
#navlist a:link#current, #navlist a:visited#current {background: #C9ACA8;border-bottom: 1px solid #f3f3f3;color: #333;}
#navlist a:hover {color: #6A0105;background:#E0DDDB; }

Thank you.

Have a nice day.

[scrambler]

You will need to elaborate and provide a link to you site because I am not sure I follow.

If by “I have a menu CSS ” you mean you created your own menu with HTML, I don’t see what you expect by “How can I get this to work as extra menu with Xtreme Plus” as Extra menu is a shortcode for weaver menus, it has absolutely no way to work with custom code.

The real questions , and this is why we need a link to your site, are:

What were you trying to achieve with your own menu that you could not with weaver menus.

What in your menu are you trying to fix in regards to mobile view.

[tix]

Hi scrambler,

Here is the test site

http://cpmrecords.com/xtreme/

Here’s how it looks on small screen

[Gillian]

You could instead use the Weaver Xtreme Tab Group shortcode (part of the Weaver Xtreme Theme Support plugin) to achieve the same look.

[scrambler]

Tabs are definitely not easy to make work on mobile, there is no good way to make them look good.

We had a similar discussion with someone a short while ago ( http://forum.weavertheme.com/discussion/comment/57373/#Comment_57373 ), who wanted to transition their tabbed content to a vertical slide open type of menu.

Although there is no such built in solution in weaver tab shortcode either, I suggested they could try to use Xtreme “Plus” Extra menu using the Accordion type.

I tested it and it does work, even if it is not a very convenient way to enter the content of the tabs.

Give it a shot, try and create one and see if you like it, if you do, you can use the tab system on desktop, and transit to the slide open vertical menu by using the [show_if] shortcodes found in the add-ons page, putting the tab code I a show if device =desktop, and the slide open vertical menu in a show if device = mobile

[tix]

Thank you Gillian & scrambler, I’ll try a few things out.

scrambler, your solution as described on the other discussion is brilliant if you have actual content on the tab. For this particular site I need the tabbed menu going to page-with-posts & the current page highlight is also something they want.

I think for the time being the simple solution is to hide it on small screen.

Tried to do that with .is-smalltablet, .is-phone  but that seems to mess up everything, so I just added  @media only screen and (max-width:640px) {#navlist{display:none;}} and that works fine.

Have a nice day.
 

[scrambler]

Tohide things on devices or pages, you have a shortcode called [hide_if] you can use . Check the Add-Ons page for more details.

Also, don’t give up yet, I am checking with weaver and we may have a solution that would involve the “Plus” plugin

[tix]

Thank you scrambler. Struggling with something else now 🙂

[scrambler]

I answered your other thread about columns as there were some changes in the latest version that do require some modification in the code for custom made columns.

As for using the “Plus” Accordion menu to show post, I have it working with weaver modification for the next version that will allow Mega menu to include shortcode.

Link removed (no longer valid)

This would let you use a show post shortcode to display post pages inside the menu content

[tix]

Hi scrambler

That looks great. Thank you.

Still recovering from my panic last night.

Have a nice day.

[scrambler]

if you have a sensitive site, you need to consider creating a Clone for testing so that you always make updates on the clone first.

You also need to keep the previous version of the theme so you can easily go back to it.

[tix]

Yes, that’s where I made an important mistake.
I deleted the test site I made when adapting to Xtreme, because I have a clone site on a subdomain. I completely overlooked that this clone still runs on weaver pro + I overlooked to download the previous version of the xtreme theme, so busy with adapting other sites to the new theme.

Good lesson !

Havce a nice day.

[Author]

Posts