[plubowicz]

Hi,

I have the megamenu setup on my site https://threadsrefreshed.com.au. I have 6 columns. For the most part it will show, but it behaves strange at 100% view.

What I mean by this, is when the screen is viewed at 100% (using a laptop that has a 17inch monitor), one of the columns is cut off (infants). If I make the screen 90% and then hit F5, I can see all the menu items and images.

It will sometimes work at standard 100% screen size.

Is there a way to have the menu be an exact size or fit? That is, I want to be seen as if the screen resolution for desktop was 90%.

The site/theme/menu works well at 90%. The issue I have is people currently have to reduce the size of the screen and then hit F5 for the menu to show properly.

Regards,

Phillip

[Althemist]

Hi Phillip,

What’s the size (resolution in pxs) of your screen?

We can’t check your website as it looks like for some reason you blocked certain countries. 🙂

Block Technical Data
Block Reason: Access from your area has been temporarily limited for security reasons.

[plubowicz]

Hi,

I have geo blocking on, but can remove it for the country you are in.

However to answer your question the issue arises for 15inch screens and 17inch screens.

On 1366×768 it doesn’t show all of the columns on the menu.

On 10inch/13inch screens it works fine.

On 19inch 1440 x 900 it doesn’t work

On 20 inch 1600 x 900 it doesn’t work properly

On 22 inch 1680 x 1050 it doesn’t work

On larger resolutions it works ok.

It is weird, on larger screen sizes it is fine and same for smaller. I am not sure if this is a theme issue or not. I have noticed on some blogs that longer headings are not getting broken into 2 lines, rather a word is getting cut off. Does this have anything to do with the themes responsiveness?

It is just odd on some monitors it shows fine and others it does not. As I said at 90% screen resolution it works just fine.

Regards,

Phillip

[plubowicz]

I have unblocked Bulgaria so you should be able to see the site.

[Althemist]

OK, I saw it. Basically, the problem is caused by the number of columns. It’s recommended to use up to 5. Each column is 241px wide, so 6 columns would be 1446px wide.

The mega menu aligns to the left of it’s parrent menu item. When it reach the right end of the header inner container it would go to the left end of the browser, but only if it fits on the screen. So, in your specific case there is just not enough space to accommodate 1446px wide menu. The best option would be to organize your menus in 5 columns max.

Alternatively, you may use the following CSS and widen your header inner content to the max:

.inner.main_menu_holder, #header_top .inner {
    width: 100%;
}

This would fix the problem for most of the screen resolutions.

[plubowicz]

Thank you. I thought it might be the number of menu columns. I will try the css fix.

I appreciate your help.

Phillip

[plubowicz]

Hi,

The css worked like a charm. Thank you

[plubowicz]

Hi,

I just noticed now after adding that css, at the bottom of the page under the footer area I am now getting:

#rs-demo-id{}

What is causing that? Did the css trigger something? How do I ensure this is removed from the bottom of the page?

Regards,

Phillip

[Althemist]

Hi Phillip,

Looks like there is some broken CSS somewhere on your site. #rs-demo-id looks like something related to Revolution Slider, but can’t be sure.

It is possible that you missed some character where you placed the CSS code I gave you, but the code itself can’t cause this.

[Author]

Posts