Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Menu problem in the mobile version

Home Forums Support Menu problem in the mobile version

  • This topic has 3 replies, 2 voices, and was last updated 5 years ago by Tom.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #151276
    Marco Giuseppe de Pinto

    After setting a border with css my menu goes out of the screen in the mobile version of the website (only if I open the menu, otherwise it is OK).

    My website http://www.gabriellacipriani.it

    My CSS:

    .main-nav {
    width:1000px;
    margin: 0 auto;
    background-color: #aa2222;
    }
    .main-nav > ul > li > a {
    font-weight:bold;
    font-family:arial;

    }
    .menu-item-183 {
    border-style:solid;
    border-color:black;
    border-top-width: 1px;
    border-bottom: none;
    border-left-width: 1px;
    border-right: none;
    }
    .menu-item-184 {
    border-style:solid;
    border-color:black;
    border-top-width: 1px;
    border-bottom: none;
    border-left-width: 1px;
    border-right-width: 1px;
    }
    .menu-item-185 {
    border-style:solid;
    border-color:black;
    border-top-width: 1px;
    border-bottom: none;
    border-left: none;
    border-right-width: 1px;
    }
    .menu-item-186 {
    border-style:solid;
    border-color:black;
    border-top-width: 1px;
    border-bottom: none;
    border-left: none;;
    border-right-width: 1px;
    }
    .menu-item-745 {
    border-style:solid;
    border-color:black;
    border-top-width: 1px;
    border-bottom: none;
    border-left: none;
    border-right-width: 1px;
    }
    .menu-item-187 {
    border-style:solid;
    border-color:black;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-left: none;
    border-right-width: 1px;
    }
    .sidebar .widget {
    background-color: #f4f4f4;
    }
    .inside-navigation.grid-container.grid-parent {
    color: #aa2222;
    background-color: #aa2222;
    }
    .main-navigation, .main-navigation ul ul {
    background-color: #aa2222;
    border-style: solid;
    border-color: black;
    border-width: 1px;
    }
    .site-info {
    background-color: #aa2222;
    }
    .sidebar .widget .widget-title {
    color: #aa2222;
    font-style: italic;
    }
    #sidebar ul.perfect-quotes li, ul.perfect-quotes li {
    font-size: 14px;
    }

    Thank you in advance for any help

    Marco

    #151334
    Tom
    Lead Developer
    Lead Developer

    It might be the .main-nav {width:1000px} part.

    Change it to max-width instead.

    Let me know 🙂

    #151514
    Marco Giuseppe de Pinto

    Solved, I removed the width part, thank you 🙂

    #151579
    Tom
    Lead Developer
    Lead Developer

    no problem, glad I could help 🙂

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.