Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS trics for responsive menu

  • This topic is empty.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #161485
    kajal jha
    Participant

    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

    #161502
    Paulie_D
    Moderator

    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.

    #161746
    kajal jha
    Participant

    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.

    #161758
    Paulie_D
    Moderator

    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.

    #161785
    kajal jha
    Participant
    #161814
    Paulie_D
    Moderator

    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.

    #161816
    kajal jha
    Participant

    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.

    #161822
    Paulie_D
    Moderator

    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;
    }
    
    #161897
    kajal jha
    Participant

    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

    #161905
    Paulie_D
    Moderator

    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.

    #162006
    kajal jha
    Participant

    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;
    }

Viewing 11 posts - 1 through 11 (of 11 total)
  • The forum ‘CSS’ is closed to new topics and replies.