[Solved] menu buttons moving when button clicked. Can I fix with Focus/Active?

[Electrik]

The dropdown menu in the white row under the header does 3 unwanted things in this site I am working on: http://sr.hi-speedinter.net

1. The text in the first child in each drop down moves to left when clicked

1.1 If you click the first option (AllyStage) in the first dropdown, the whole button moves to the right.

2. Also in the first dropdown (Staging), when you click any option in the dropdown, then move the cursor off the menu, the word “Staging” moves to the left.

Now I had to make the text in the Staging button move to the right when hovered over because the designer wanted the blue tab behind it and the left edge had to line up the the logo above.

Also, this is a dev site and really slow at present. It’s headed for Cloudflare and possibly a VPS, so maybe these issues won’t be so pronounced when everything is not as sluggish, but..

Here is my (unsuccessful) attempt at adding some padding to the first-child (which seemed like the logical fix):

nav#primary-navigation.site-navigation.primary-navigation div.topbar-menu ul.nav-menu li.menu-item.menu-item-type-custom ul.sub-menu li.menu-item.menu-item-type-post_type.menu-item-object-product:first-child:active {
padding-left: 14px;
}

I’m trying to be as quite specific so as to make sure the style isn’t overridden by other CSS

How can I fix these? Can anyone help?

Thanks

[Paulie_D]

Sorry…waited for 30 seconds and the CSS hadn’t loaded.

I’d try and find another dev site solution if you want remote assistance.

Alternatively, if you can reproduce the specific issue in a walled garden demo site like Codepen.io we might be able to help further.

[Electrik]

It seems right after I posted this Dreamhost had issues. None of our sites would load. It’s back now

[Paulie_D]

No. 1 – Looks like it’s this is the issue:

@media screen and (min-width: 1024px)
nav#primary-navigation.site-navigation.primary-navigation div.topbar-menu ul.nav-menu li.menu-item.menu-item-type-custom ul.sub-menu li.menu-item.menu-item-type-post_type.menu-item-object-product:first-child:active {
  padding-left: 14px;
}

No 2 is probably in here

@media screen and (min-width: 1024px)
ul.nav-menu > li.menu-item:first-child:active > a, ul.nav-menu > li.menu-item:first-child:hover > a {
  padding-left: 12px;
  padding-right: 14px;
}

Looks like that’s being overriden somewhere or at least not being consistently applied

@media screen and (min-width: 1024px)
.primary-navigation .topbar-menu > ul > li:first-child > a {
  padding-left: 0;
  padding-right: 26px;
}

[Electrik]

Thanks for the pointers, sorry for taking so long to respond.

I can’t easily say what it was, but for anyone reading this and having a similar type of problem: go back to the start, write out a list of the steps and what happens in the case of hover/active/focus and work your way through it methodically. In the end this was the quickest way to fix it and I saw where the conflicts were.

[Author]

Posts