UberMenu & Sterling Theme WordPress

Kyle comments:

Can you post a link to page with the menu to check this?

slugger12 comments:

Ok, I need that to be a little more specific about what code to change. But first, I still want to use my theme navigation on the front page and public pages, and use the ubermenu conditionals plugin to show the ubermenu on a specific page template I made for the members area. Is there any way to do this other than replacing the default menu?

slugger12 comments:

http://www.risk2riches.com ....right now the ubermenu is not activated or the navigation would disappear.

Kyle comments:

The theme integration part of the ubermenu site probably has the answer: http://wpmegamenu.com/help/#theme-integration

Doesn't the ubermenu conditionals only show/hide menu items? Not entire menus

It sounds like you made need a good deal of custom code (custom templates too?) Without seeing more code or the menu active it is tough to give an accurate answer.

slugger12 comments:

The menu is active now. When I was reading the conditionals extension page it mentioned being able to assign it to only be used in a particular page template. However at this point I would be satisfied with just getting it to work with the main navigation and going from there. It would be a nice upgrade from my current menu system, the rest I can figure our later. If you have an idea of the specific code change in the header.php file that would be great. I have tried the solutions on the support page with no luck. I tried the easy integration as well and replaced the code and the menu links were all over the page.

here is the current code in the php header file for the navigation call



<nav>
<ul>
<?php wp_nav_menu( array( 'container' => false, 'theme_location' => 'Main Menu', 'depth' => 0 ) ); ?>
</ul>
</nav>

Kyle comments:

I am still seeing the default menu. Where is the ubermenu in the layout?

Yes, I believe individual menu links can be assigned to particular pages templates, etc. but not entire menus. I am still not positive about needing to change the header.php until I can see the error up on the screen.

slugger12 comments:

It is active now. I changed it back because I didn't see any more responses since last night.

Kyle comments:

Okay, the problem is that there are a ton of css conflicts that are hiding the ubermenu and overriding its styling. If you inspect where the menu is you can find the <nav></nav> and inside is the megaMenu. It is hidden because the theme has code in the style.css file which is overriding ubermenu.

E.g. on line 265 of your style.css file is this:

nav > ul ul {
display: none;
}

Which is why it doesn't get displayed at all, from there it is about tweaking different parts to get it to act naturally. With that, you also need to be careful because some of that styling is affecting your other menu, which you are trying to display simultaneously.

slugger12 comments:

ok, so if I just want to display the ubermenu to replace the main navigation, what css do I need to remove? Here is the entire navigation in the css style sheet

/*----------------------------------------------------------*/
/* 3. Main Navigation
/*----------------------------------------------------------*/
nav select {
display: none;
}

header nav {
position:absolute;
top:50%;
right:0;
margin-top:-8px;
z-index:9999;
}

header nav ul{
padding:0px;
list-style-image:none;
}

nav > ul > li {
display:inline-block;
position:relative;
}

nav > ul > li+li {
margin-left:28px;
}

nav a {
font-size:16.5px;
text-decoration:none;
padding:3px 5px;
}

header nav .sub-menu a:hover{
color: #555;
}

header .sub-menu li:hover {
background:#eee;
border-radius:4px;
box-shadow:inset 0 0 2px #CCC;
}

nav > ul ul {
display:none;
}

.submenu {
overflow:hidden;
font-size:13px;
height:14px;
}

.submenu ul {
padding-bottom:1px;
}

.submenu strong {
float:left;
}

.submenu li {
float:left;
line-height:1em;
margin:0 16px;
}

header .sub-menu {
position:absolute;
background-color:#FFF;
z-index:2;
left:-12px;
top:40px;
width:210px;
box-shadow:0 0 3px #c3c3c3;
border-radius:8px;
/* padding:20px 15px 15px; */
padding:20px;
}

header .sub-menu a {
font-size:13px;
display:inline-block;
width:100%;
padding:9px 10px;
}

header .sub-menu .sub-menu {
left:231px;
top:0;
}

header .sub-menu .sub-menu:before {
content:'';
}

header .sub-menu li {
position:relative;
margin:0;
}

.has_submenu > a:after {
content: url('images/global/arrow-small-down.png');
position: absolute;
right: -12px;
top: -3px;
}
.has_submenu .has_submenu > a:after {
content: url('images/global/arrow-small-right.png');
right: 9px;
top: 8px;
}
/*--- /BUZU adds this on Oct 23 2012 ---*/
/* header .sub-menu .current-menu-item a {
font-weight:bold;
} */

Kyle comments:

Its much more complicated than that. You will need to test which code is affect ubermenu and which is affecting your default menu and than try to adjust in such a way that you can use both without interfering with one another. Needless to say a bit larger of a task than a $15 project :)

slugger12 comments:

I only want to use the ubermenu and not the default menu.