Media Queries

  • nonamer

    (@localgreeneats)


    8 years, 5 months ago

    I have a responsive site that I am happy with. However, I’ve created two menu bars on my own without the responsive menus available.

    What’s the best way to write CSS for the two menu bars to show on smaller screens? (i.e. phone, iPad, smaller screens)

    I’ve tried
    @media screen and ( min-width: 401px ) {
    secondary.menu {
    width: 49%;
    margin-right: 2%;
    }
    }

    but that didn’t work. I’ve tried a variety of code but noting seems to work. I just want the secondary menu & tertiary menu to display on all smaller screens.

    Thanks for your help

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

  • Hello localgreeneats,

    The media query that you have written is the best way to apply css on smaller screen but the selector you have added is “secondary.menu” and secondary is not an HTML tag so if the secondary is the class name you must write like this “secondary.menu” please changing this this will help you.

    @media screen and ( min-width: 401px ) {

.secondary.menu {
width: 49%;
margin-right: 2%;
}
}

    Thanks

    Thread Starter nonamer

    (@localgreeneats)

    Hi Clarion,

    This is still not working because the size isn’t adjusted for smaller screens.

    I also tried this

    /*************** CSS TO MAKE MENU LINKS SMALLER  ***************/
@media only screen and (min-width: 768px) {

.secondary.menu ul.menu > li > a, .secondary.menu ul.nav-menu > li > a {
    padding: 0 0.4em 2.5em!important;
    font-size: 14px!important;
}
}
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Media Queries’ is closed to new replies.