Joy
(@joyously)
You should ask at your theme’s support forum, unless you are using a plugin for menus (then ask in the plugin’s support forum).
Thread Starter
Phase
(@phaseband)
I see… stack exchange it is..
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Joy’s advice is legitimate, @phaseband . There’s a style coming from your theme that indicates it is intentional:
.nav li:hover ul,
.nav li.sfhover ul {
left: -75%;
...
}
Instead of overriding intention code from your theme, you should explore the underlying issue of why your theme is being offset. Your theme developer, having full context of the Whys of your theme, will be the best person to ask.
Thread Starter
Phase
(@phaseband)
Thanks for your reply Andrew,
with the rest drop downs (Gallery, Party) this isn’t happening/visible though.
any ideas on why would that be happening?
Thank you
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
I can’t really tell, looks to me like those other menu items just have hard-coded left styles as well but with different values. For example ‘Gallery’ dropdown has ‘left: -47%’ on hover. That could be something to do with JS you’ve got going there
Thread Starter
Phase
(@phaseband)
It only happens on it even if i change the order of the items
/* Dropdown */
.nav li ul {
position: absolute;
left: -999em;
padding: 4px 0 0 0;
z-index:99;
}
.nav li:hover ul,
.nav li.sfhover ul {
/*left: 0;*/
left: -75%;
top: 30px;
}
.brat2 {
display: none;
left: -52% !important;
}
.nav li:hover li,
.nav li.sfhover li,
.nav li.current-menu-item li,
.nav li.current_page_item li,
.nav li li {
background: #333 url(images/dropdown.jpg) 0 0;
width: 160px;
height: 28px;
line-height: 14px;
border: 1px solid #303030;
border-top: none;
padding-top: 4px;
text-align: center;
}
.nav li:hover li a,
.nav li.sfhover li a {
background: none;
color: #999!important;
height: auto;
line-height: 14px;
padding: 8px 10px;
text-align: center;
}
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
There’s some pretty horrible JS in your theme:
// Edit PARTY menu item dropdown position
$('.page-item-8').hover(function() {
$(this).children()[1].style.left = "-70%";
},
function() {
$(this).children()[1].style.left = "-999em";
});
// Edit GALLERY menu item dropdown position
$('.page-item-11').hover(function() {
$(this).children()[1].style.left = "-47%";
},
function() {
$(this).children()[1].style.left = "-999em";
});
Are you developing this? If so, we can help you find a better way of fixing the dropdown than adding this bottleneck JS and CSS in.
Thread Starter
Phase
(@phaseband)
thank you… what should I replace it with?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Can you tell us first why you are writing this JS and CSS; what is the issue you are trying to resolve?
Thread Starter
Phase
(@phaseband)
I am a hobbyist really,
Not a proessional, all I’ve learnt is through forums and that.
I need to sort that drop down out
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Okay I see. So remove that JS and CSS you’re using to control the submenu position.
Then add this:
.nav li {
display: inline-block;
position: relative;
}
.nav li:hover ul, .nav li.sfhover ul {
left: 0;
}
Summarising the issue;
1) Your main navigation menu items were displayed “inline”, but they needed to be “inline-block”
2) Your drop-down menu was not positioned relative to their parent item in the main navigation
Thread Starter
Phase
(@phaseband)
Nothing happened. If I shorten the word it gets fixed if it’s of any help
Thread Starter
Phase
(@phaseband)
my guess is there’s more css below what I am adding that cancels what I am trying to change
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Clear your browser’s cache, you should see a difference
