[danhirnerParticipant]

I am wanting my sub menus (such as number plate graphics under the shop menu) to expand down or to the right. Right now they open to the left and fall off screen for some of the smaller screens.

Is there an option to fix this?

url is https://bikegraphix.com

[RupokMember]

Hi there,

Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

[danhirnerParticipant]

Ok, I’ll attach some images.

First image shows the desktop view of the menu. The final expansion of the number plate graphics category in the menu, expands to the left and is not very clean. Sometimes totally off the left side of the screen.

The next image shows the mobile version of the same site. You see the number plate graphics category expands down instead of to the left. The next level of the menu is directly below the parent level.

Is it possible to make the desktop version the same as the mobile version?

[RupokMember]

Hi there,

Thanks for writing back. The way it is working is usual and expected. If you want to change the position then it might be a bit unusual as the submenu will be barely visible. However you can modify the below class and add to your Customize > Custom > CSS if you really want to change this :

.masthead-inline .x-navbar .desktop .sub-menu .sub-menu {
  right: 100%;
  top: -0.75em;
}

You can update this to following :

.masthead-inline .x-navbar .desktop .sub-menu .sub-menu {
  right: auto;
  top: 3em;
  left: 1em;
}

Let’s play with this and change the values with your own or add your own CSS.

Cheers!

[danhirnerParticipant]

Perfect. I played with the values and got the drop down to fall exactly where I want. Now it will not fall of the left of the screen on smaller screens. Thanks so much!
Dan

[RupokMember]

Hi Dan,

Thanks for updating! I am not sure which smaller size you are referring as I can see it’s fine for any screen size. However you can define media query and add your code block there for a specific screen range.

You can define your media query like this :

@media only screen and (max-width: 979px) {
 // Add your CSS code here
}

@media only screen and (min-width: 980px) and (max-width: 1024px){
 // Add your CSS code here
}

Hope this helps.

Cheers!

[TrikonParticipant]

I don’t understand why this menu CSS doesn’t flip to the right side if there is not enough space on the left to display. Can we not code that dynamic CSS?

As it stands, a browser with a viewport of 1501×906 (quite large really, this is no small screen issue) drops a megamenu, consisting of 5 cols on the 4th level sub-menu (from/including top), off the screen to the left.

Can’t sell that to the client.

??

[ChristopherModerator]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[Author]

Posts