trics for responsive menu

[kajal jha]

my website is in drupal and i am using a zen 5 theme and i want my menus to be same for desktop screen till screen width 0f 960 but it’s not fitting properly up to 960 screen width it breaks before 960 so how to adjust that
i have used the padding in em for menu but doesn’t work at all please help

[Paulie_D]

Please make a Codepen so we can examine your code but a simple google search of how to use media queries would be of great use to you.

[kajal jha]

the problem is like if i give the padding-right for anchor element of menu its looks good for that specific screen for eg. i have made the css file for screen max-width: 960px to min-width:769px so when i give pading-right to anchor tag to for screen width 960px it breaks for less than that and if i set it for screen 769px it looks small for 960px width so how to give padding or margin to adjust the menu.

[Paulie_D]

Please make a Codepen so we can examine your code but a simple google search of how to use media queries would be of great use to you.

….or give us a live link.

[kajal jha]

http://jnstheme.venuslabs.co.in/

http://codepen.io/anon/pen/GDugb

[Paulie_D]

It looks like it’s breaking fine to me…but perhaps you haven’t allowed for the width of the scrollbar.

Some browsers will include this in the width and some wont.

You should recall that the vast majority of viewers will NOT be re-sizing their browsers…it’s only us developers who do that.

[kajal jha]

have you seen this http://jnstheme.venuslabs.co.in/ the menu should exactly of same width as of the page but as i increase the padding-right as mention in my code to fit for the same as of the page width than its breaks at 966px screen.

right now the menus are not fitting properly as of the page width it is less than that but for 966px it is perfect.

[Paulie_D]

For me it breaks around 972px (excluding scrollbar) but that’s probably due to the total width of the `li’ once you have included all the padding and margins.

If 960px is important to you, try this

.block-nice-menus ul.nice-menu-down li a {
padding: 12px 0.60em;
}

[kajal jha]

i am using the same css file for screen width 960px to 769px but iam not getting it that how to fit this upto 769px

[Paulie_D]

Wait…now you want it to fit into 769px….it won’t do that…you just have too many pixels already being used. Basically the menu text and padding add up to more that 769px so it just won’t fit.

You could add another media query and reduce the font-size and/or padding or look into restructuring the menu or using a more mobile friendly option.

[kajal jha]

my dropdown menus are at absolute position in mozilla firefox while its working fine for other browsers using the following css

ul.nice-menu {
display: table;
}
ul.nice-menu li {
display: table-cell;
float: none;
}

[Author]

Posts