Need help? Check out our Support site, then


Change Menu for Mobile

  1. theclubsydney2011
    Member

    Hey guys, wasn't sure which section to put this in...

    I need to make some changes to the menu (I believe) on my site as when accessed via a mobile browser the design is broken and the menu takes up half the screen. Ideally I'd like it not to be a side menu and to just be like normal mobile site menus (ie - the same as how it is on my other site which is Penscratch).

    The website is theclubsydney.com

    Theme - Confit

    Thanks

    The blog I need help with is theclubsydney.com.

  2. Hi there, some of the custom CSS you've added has affected the mobile menu, causing it to take up only half the screen.

    You can see how the Confit menu is designed to look on mobile by viewing the Confit demo site: https://confitdemo.wordpress.com/

    To prevent this from happening, I'd suggest you wrap the parts of your custom CSS that affect layout in media queries, so they don't damage the responsive styles that automatically adjust the layout for smaller screens. You can find out more about how media queries work here:

    http://en.support.wordpress.com/custom-design/custom-css-media-queries/ http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

    Media queries are a simple concept but powerful in practice, and can take some experimentation and testing to get right.

    Once you've gotten the mobile menu back to normal, if you need further help tweaking it to look different than the demo site, feel free to post in the CSS Customization forum.

  3. theclubsydney2011
    Member

    Thanks for that. I've only just started managing this site and am relatively new to CSS, is there a way to determine which parts are custom which aren't? Other than "entry-meta display: none" the rest were already there when I took over and given the site did not have a premium subscription until I upgraded would I be right to assume the rest are standard?

    This is what the site has currently -

    .main-navigation li {
    text-align: center;
    }

    #page:before {
    background-color: white;
    content: '';
    min-height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 230px;
    }
    }

    #post-133 {
    /*display: none;*/
    }

    #masthead {
    float: left;
    width: 230px;
    }

    #secondary {
    clear: left;
    float: left;
    overflow: hidden;
    position: relative;
    width: 230px;
    z-index: 2;
    }

    .comments-link {
    display: none;
    }

    .comments-area {
    display: none;
    }

    .socialLinks {
    width: 100%;
    text-align: center;
    }

    .socialLinks a {
    text-decoration: none;
    padding: 5px;
    }

    .socialLinks a:hover {
    text-decoration: none;
    }

    .addressFooter {
    text-align: center;
    border-bottom: 1px solid #cccccc;
    padding: 10px;
    margin-bottom: 10px;
    }

    .subscribeLink {
    text-align: center;
    font-size: 13px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    }

    /*YEP THE VAUX STYLES BEGIN!*/
    .cell {
    display: inline;
    float: left;
    position: relative;
    margin-left: 1%;
    margin-right: 1%;
    width: 31%;
    margin-top: 20px;
    margin-bottom: 20px;
    }

    .cell .image img {
    max-width: 100%;
    height: auto;
    }

    .cell .title {
    font-size: 12px;
    font-weight: bold;
    }

    .cell .details {
    font-size: 12px;
    }

    #post-0 {
    display: none;
    }

    .entry-meta {
    display: none;
    }

  4. is there a way to determine which parts are custom which aren't?

    Everything that's been entered in the Customizer's CSS panel is custom CSS and not part of the original theme.

    One way to troubleshoot would be to remove all the custom CSS, and start adding back pieces slowly, bit by bit, testing your site at various screen sizes after each addition. When the mobile menu breaks, you know the last piece was the culprit, and you can then try adding a media query around it to restrict it to a larger screen size, or you can simply delete that piece of CSS.

    Alternatively, you might want to remove all the custom CSS and start fresh with any changes you want to make. Since you're new to CSS, I'd suggest posting in the CSS Customization forum for assistance.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.