wordpress javascript problem

M

mic_y

Expert Member
Joined
Dec 23, 2004
Messages
1,646
Reaction score
10
Location
Slaapstad
Hi guys,

I have been asked to change the menu layout on a wordpress site.

when hovering over menu item 1, currently, the menu displays as such:
Menu item 1
--sub menu item 1
--sub menu item 2

The client has requested that the sub-menu's display inline as such:
Menu item 1
--sub menu item 1 --sub menu item 2

when hovering, there is some JS somewhere, that sets the <ul> container for sub-menu items display mode from "none" to "block", which leads to the current problem.

I need to change this JS to set the display mode to "inline" to achieve what I need, but for the life of me, I have been unable to figure out where exactly to find this function.

If anyone could advise where to find the JS responsible for the hover, would be much appreciated.
 
You not really providing enough info to enable us to help you.

The menu design could be residing in the active theme folder.

Is it a custom theme or an off-the-shelf theme ?

Theme name could help and where it comes from ?

Look in the active theme folder and examine the codes found there for your menu.

When I design custom themes for WordPress, the code for the menus that I design is in the custom theme folder OR part of the plugin code if it is a menu plugin.

Also if you view the page source in your browser click on the <script> links to follow to the code.
 
Last edited:
Is it not possible to take the css class name or id and grep for it? Also something like firebug or any browser dev tool should show you the css of whatever you clicked on (assuming it is not se programmatically)
 
Last edited:
Well are you certain its JS doing this, CCS Overrides can also do this where there are multiple CSS Classes that override the functions...

Use firefox firebug or IE Developer or Chrome Developer tools (F12) in the browser...

If the website is using Frameworks like Bootstrap these adjustments could be hidden in the Minimized files

if it JS then you should be able to narrow it down to the file it is being executed it...

Alternatively you can use something like Notepad ++ which has a function that allows you to search for a word in all files in a specified directory... if you are sure its converting to a block then you can just search for "block" and it should show you all the files it is in... then just focus on the JS Files or CSS files as that is where it will be... Unless somehow you are trying to configure wordpress from within the admin panel then well... best of luck...
 
Find the style class for the <li>, and then search for that class + :hover. That will most likely be your culprit.
 
thanks for the responses guys, and apologies for not getting all the info right. Think I was just a little bit too tired and the brain wasn't really functioning after digging through thousands of lines of (very unfamiliar PHP/JS) code.

The site uses the IBUKI theme http://themeforest.net/item/ibuki-creative-multipurpose-shop-theme/8179978

The site (as it currently stands) can be accessed here: http://niroxarts.com/new/index.php

The menu used is the standard WP menu, no plugins handling this.

This is the rendered HTML for the sub-menu:
-- collapsed: <ul class="sub-menu" style="float: none; width: 20.9090909090909em; display: none;">
-- open: <ul class="sub-menu" style="float: none; width: 20.9090909090909em; display: block;">

The reason I suspect this is JS (and I do stand to be corrected on this) is that on hover, the element.style is updated (inline style defined).

Unfortunately, my JS debugging is pretty shoddy, and whenever I try and pause execution, the debugger stops in some random spot in a loop that handles scrolling, and I have as yet been unable to figure out where exactly the hover/mouse over code is.

You guys are all legends for helping... :D
 
I lived in Lonehill for 12 years OP. Damn I miss that place :D

Anyways, you could try something like this:
Code: 
.sfHover > .sub-menu {
display: inline !important;
}
 
Treeofl1 said:
I lived in Lonehill for 12 years OP. Damn I miss that place :D

Anyways, you could try something like this:
Code: 
.sfHover > .sub-menu {
display: inline !important;
}
Click to expand...

Thanks for the assistance... will give this a shot. I am assuming I just insert this CSS using some sort of custom CSS plugin?
 
Go to Theme Settings -> Appearance and edit the css file from the WP dashboard.
 
awesome, eventually figured it out, thanks to all your help. I forgot to include the !important in the CSS, and it was being overwritten by something (still cant figure out exactly what). After adding the display:inline !important to the theme's CSS file, all magically started working, minus a couple of other new styling problems...
 
hi guys. I am still having some trouble with finalising this job. The client is understandably unhappy about the current look of the sub-menu, and my lack of CSS knowledge is not helping the situation. could any of you CSS gurus take a look at the site, and maybe advice me of how to to get the sub-menu looking decent.

To see what i'm talking about, please take a look at the "about" sub-menu. The spacing is all out of whack. I would like it to resemble the spacing of the top level menu.

http://niroxarts.com/
 
I've had a look, and I can't seem to keep the sub menu visible even with making it display:block by editing the site code directly.

Is there some sort of demo or test url you can put this up on and force the sub menu to always be visible?
 
Darko said:
I've had a look, and I can't seem to keep the sub menu visible even with making it display:block by editing the site code directly.

Is there some sort of demo or test url you can put this up on and force the sub menu to always be visible?
Click to expand...

That and remove the image background scrolling on the test site
 
cool beans... will just need to create a separate blank page, etc... give me a few guys :)
 
Just going on http://niroxarts.com/index.php/menu-test/ and http://niroxarts.com/ as they are:

1. Text is white, and in some of the pics there are clouds, i.e. no contrast for reading. Perhaps add an opaque background for starters. e.g. background: rgba(0,0,0,0.6). Maybe even add opaque background for the topmost navigational menu too.

2. If 1, text is flush against the left border of the dropdown. Add padding on the left to make it easier on the eyes.

3. For me, the dropdown pops out hard. Others may see differently. Be that as it may, a quick css transition on opacity would be great, but that would require you replace display: none/block to visiblity: hidden/visible, with the requisite javascript call for the display property to be changed as well.

EDIT: on 3 above, I see there is some change of opacity on hover. However its not kicking in due to toggling the display property instead of visibility.
 
Last edited:
mic_y said:
Hi guys,

I have been asked to change the menu layout on a wordpress site.

when hovering over menu item 1, currently, the menu displays as such:
Menu item 1
--sub menu item 1
--sub menu item 2

The client has requested that the sub-menu's display inline as such:
Menu item 1
--sub menu item 1 --sub menu item 2
Click to expand...


You need these.

ul.sub-menu {
width: 754px !important;
}

ul.sub-menu > li {
float: left !important;
width: auto !important;
margin-right: 10px;
}
 
Murdoc said:
You need these.

ul.sub-menu {
width: 754px !important;
}

ul.sub-menu > li {
float: left !important;
width: auto !important;
margin-right: 10px;
}
Click to expand...

Hi Murdoc, Thanks for the CSS. I will give it a shot tonight and when it works, I will need your physical address to deliver a case of beer ;)
 
battletoad said:
Just going on http://niroxarts.com/index.php/menu-test/ and http://niroxarts.com/ as they are:

1. Text is white, and in some of the pics there are clouds, i.e. no contrast for reading. Perhaps add an opaque background for starters. e.g. background: rgba(0,0,0,0.6). Maybe even add opaque background for the topmost navigational menu too.

2. If 1, text is flush against the left border of the dropdown. Add padding on the left to make it easier on the eyes.

3. For me, the dropdown pops out hard. Others may see differently. Be that as it may, a quick css transition on opacity would be great, but that would require you replace display: none/block to visiblity: hidden/visible, with the requisite javascript call for the display property to be changed as well.

EDIT: on 3 above, I see there is some change of opacity on hover. However its not kicking in due to toggling the display property instead of visibility.
Click to expand...

Hiya battletoad,

I agree with all the points you have made, and also pointed out the exact same suggestions to the designer whose project this whole thing really is. Apparently the client is being hard-ass about these specific design elements, so I am just taking the approach of: not my circus, not my monkeys...
 
You must log in or register to reply here.
Back
Top
Sign up to the MyBroadband newsletter
X