- This topic is empty.
-
AuthorPosts
-
January 30, 2014 at 9:30 pm #161485kajal jhaParticipant
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 helpJanuary 31, 2014 at 4:19 am #161502Paulie_DMemberPlease 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.
February 3, 2014 at 5:51 am #161746kajal jhaParticipantthe 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.
February 3, 2014 at 9:02 am #161758Paulie_DMemberPlease 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.
February 3, 2014 at 8:42 pm #161785February 4, 2014 at 5:32 am #161814Paulie_DMemberIt 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.
February 4, 2014 at 6:06 am #161816kajal jhaParticipanthave 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.
February 4, 2014 at 7:52 am #161822Paulie_DMemberFor 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; }
February 4, 2014 at 10:05 pm #161897kajal jhaParticipanti am using the same css file for screen width 960px to 769px but iam not getting it that how to fit this upto 769px
February 5, 2014 at 3:25 am #161905Paulie_DMemberWait…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.
February 6, 2014 at 1:59 am #162006kajal jhaParticipantmy 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;
} -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.