So, what went wrong - as I was changing my Zen template to similar Adaptive template -

my Mega Menu on Adaptive theme is grouping all items left, in a narrow space, like on a mobile screen, even I am sitting at my laptop 1366 x 766 and my Mega Menu is told to be display: Inline ; it acts like there was no space on right anymore....
I am trying it in Header area mostly...
The Menu items stay the same size when I try to shrink my browser and everything else shrinks;
but on absolute width it doesn't use all width;


medhatayar’s picture

Write styles for desktop/large screen first and then using media query overwrite style to make it look like in mobile

ZambalaRed’s picture

I have no clue about media queries at all and I never would try to touch them at any way; that's all as provided by Adaptive Themes;

- and - I don't need here mobile layout at all in this case - for mobile screen responds 'Responsive Menus' module, which is taking over at smaller screens;

- All I want is - how to make the Mega Menu to display 100% navbar on a desktop-laptop screen!

gausarts’s picture

The proposed solution above may be the best way to go for custom work with your particular use case, or when you have trouble with the stock themes.

Do not discourage yourself by saying "never" for the solution offered, otherwise hire someone else who can to do it for you. If you can't, please be bold to ask uncle Google for "CSS media query". Select the words in the quotes on the left, right click, and hit "Search Google ....", or put them in the browser address bar, and hit Enter.

You have been very courageous to ask here, so you should be to ask uncle Google, too :p

To have better chance for help, theme related questions may need more visual or actual hintings:
A screenshot, or a link to website will do.

If you can't provide such info, unless you can provide better wordings, I don't think your current info is clear enough to help.

Most likely you need this to prevent absolute position from collapsing, assumed without media query:

/* change .menu to your relevant trouble selector */
.menu {
  width: 100%; /* Or 960px, etc */

You may also want to remove position: relative; of the direct parent LI element, or easier to override it with position: static;, and assign relative position to the closest UL or NAVBAR element instead. This way you can have the magamenu flyout 100% width spanning across menu items, otherwise the flyout will be shrinked to the nearest narrow LI element.

But that is a wild guess. I recommend using Firebug for FF, or hit f12 for chrome to help you any better yourself.

love, light n laughter

ZambalaRed’s picture

Hello, gausarts, your proposed answer is complete spam and BS, and besides even I have degree in philosophy, I am always coding my website by myself and I know how to use google; but when I say I have no idea, I mean it! usually it means I don't feel big necessity and not going to waste my time on it!

another side-note, - I did find the problem myself, without your or anybodies help, and it was related to clearfix: hidden in this particular theme! what it did was it hide the background of my Menu; it had to be visible;

gausarts’s picture

Awesome, glad you sort it out yourself. That is the point of the forum, help others help themselves.

If you think my reply is a spam, there should a link for you there "report spam". Just hit it.

love, light n laughter

Jaypan’s picture

Hello, gausarts, your proposed answer is complete spam and BS

How rude. Gausarts took the time to make the reply, giving you a potential solution, and pointing you to where you need to look. And your response is not a 'thank you', but 'your answer is BS'.

I've made a note of your name, and I will make sure to never help you on any of your points, if that is the kind of response that I can expect.

Checkout my Japan podcasts.
knight218’s picture

This is why we dont get solutions, this kind of attitude, work on it