Using nav menu on different screen sizes

  • Resolved courtneyjouning

    (@courtneyjouning)


    9 years, 6 months ago

    I am trying to use the menu on my website across all screen sizes. I would like the menu button to decrease and increase in size as the screen size changes (mobile, tablet, desktop) but in the settings there is only one area to set the line height/width etc. I sit possible to change the size some other way, I have tried to use developer tools to locate the each piece to re-size it on my css sheet but not having much luck. Any help appreciated.
    Cheers

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Contributor responsivemenu

    (@responsivemenu)

    9 years, 6 months ago

    Hey there,

    It certainly is possible but there are many custom css options you will need to change to do this manually.

    I would start in the dev tools by looking for the #responsive-menu-button element and then working inwards from there.

    Hope it helps

    Thread Starter courtneyjouning

    (@courtneyjouning)

    9 years, 6 months ago

    Anything more efficient?

    Thread Starter courtneyjouning

    (@courtneyjouning)

    9 years, 6 months ago

    I have now reduced them in size but the spacing between each line is too large and I can not trigger the ‘position’ of each line to move them closer together

    Plugin Contributor responsivemenu

    (@responsivemenu)

    9 years, 6 months ago

    Hi there,

    I’m not sure what you mean by more efficient, can you please elaborate.

    I am not aware of any inefficiencies of using media queries, in fact this is pretty much the defacto standard for changing styles at different screen sizes.

    The only alternative is to use JavaScript or jQuery but I expect that this is will be alot less efficient than the method I have proposed as you would need to query the page size on each page load or resizing of the screen.

    All the best

    Plugin Contributor responsivemenu

    (@responsivemenu)

    9 years, 6 months ago

    Hi there,

    Please provide an example URL so I can check, you can change the distance between lines using the below CSS rules:

    .responsive-menu-pro-inner::after {
   bottom: -15px;
}

.responsive-menu-pro-inner::before {
   top: -15px;
}

    All the best

    Thread Starter courtneyjouning

    (@courtneyjouning)

    9 years, 6 months ago

    Hi,

    Sorry, no I meant more efficient as in maybe there was something I was missing in the plugin, but yes definitely media queries are the most efficient.

    I have been able to change those positions but only in dev tools, when I add them to my CSS file it looks like it gets over-ridden due to media query I have set in the plugin is max-width 999999

    Thanks

    Plugin Contributor responsivemenu

    (@responsivemenu)

    9 years, 6 months ago

    Hey there,

    Apologies I misread your meaning on efficiency.

    If your CSS is being overriden you will need to make the declaration more specific to overwrite the previous styles, you can do so by prepending with the parent element as so:

    #responsive-menu-button .responsive-menu-inner::after {
   bottom: -15px;
}

#responsive-menu-button .responsive-menu-inner::before {
   top: -15px;
}

    Also, apologies the previous example I gave you was incorrect as it was actually the pro classes not the free version that I gave you.

    Please try the above and let me know if it works for you.

    All the best

    Thread Starter courtneyjouning

    (@courtneyjouning)

    9 years, 6 months ago

    FIXED:

    problem solved, although the ::after is slightly wrong it needs to be

    .responsive-menu-pro-collapse .responsive-menu-pro-inner::after
    top -5px

    thanks for your help!

    Plugin Contributor responsivemenu

    (@responsivemenu)

    9 years, 6 months ago

    Hey there,

    .responsive-menu-pro-collapse is only used for the Collapse button animation so it would be better to use something generic like the example above (just add the pro prefixes back in).

    However, if you plan not to change the button animation type then the code above will work just fine 🙂

    Either way I’m glad it is working for you now!

    All the best

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Using nav menu on different screen sizes’ is closed to new replies.