Need HTML/CSS customization support? Upgrade to CyberChimps Plus.

center menu and footer content to page

CyberChimps Home Forums Limited Support for Non-Plus Members Responsive center menu and footer content to page

This topic contains 12 replies, has 4 voices, and was last updated by  Bryan Hadaway 1 year, 2 months ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #122005

    erez88
    Participant

    Hi guys, excellent theme. So far, I’m having a great time modifying it!

    I’d like to align both the menu and footer content from left (default) to center and was wondering how to do so. Nothing that I did (mostly text-align: center with and without other codes) seemed to make it work. What am I doing wrong?

    I should also add, that I brought the logo down to the menu, so now they’re on the same baseline. The logo should center with the rest of the menu, so it looks like this: http://erezhenya.com/random_files/wp_forum/menu.png

    For the footer, the desired effect looks like this: http://erezhenya.com/random_files/wp_forum/copyright.png

    I understand it’s the grid that affects the layout, for if I disable its float:left property, it all works just fine, only I then create another problem — the sidebar becomes a horizontal bar below the main body container… so I guess I should somehow override this property for the footer only…? if so, how? or maybe that’s not the right way to do it at all?

    P.S.- sorry I unable link to the page, I test it on my localhost…

    Many thanks!

    #122013

    erez88
    Participant

    A small self-correction: the grid float:left property does not affect the menu.

    #122044

    Ulrich Pogson
    Keymaster

    This should do the menu.
    http://cyberchimps.com/guide/how-to-center-main-header-menu/

    This should help with the footer.
    .copyright {
    text-align: right;
    }
    .powered {
    text-align: left;
    }

    http://demos.cyberchimps.com/responsivepro/responsive-grid/

    #122114

    erez88
    Participant

    Thanks Ulrich! It worked perfectly for the footer However, while this also works for the menu in the full grid, look what it does to the mobile grid menu when clicked (open mode): http://erezhenya.com/random_files/wp_forum/menu_broken.png. To make sure it’s not the result of one of my code lines, I removed all of my child theme modifications and virtually started from a scratch. Is there a way to fix it? perhaps limit .menu .menu li and .menu li li to the full grid only?

    #122116

    erez88
    Participant

    More specifically, it seems the .menu li {display:inline-block}; property is in charge for it.

    #122180

    Thomas Oliver
    Keymaster

    We’ll need to see the site.

    #122264

    erez88
    Participant

    Thanks Thomas. It’s on my localhost… is there a way around this?

    #122288

    Ulrich Pogson
    Keymaster

    I updated the guide with media queries. It should work fine now.

    #122353

    erez88
    Participant

    Super, Ulrich! It works perfectly. I was wondering however what’s behind the margin-left: -5px; property? it only seems to mess things up on mouse hover.

    #122366

    erez88
    Participant

    Also, what’s the min-width: 981px in @media screen and (min-width: 981px) { for? For any lower resolution, the menu aligns back to left. Would it be safe take it down to 651px? (below, is the responsive menu)

    #122369

    Bryan Hadaway
    Keymaster

    margin-left: -5px; is just a small alignment/cosmetic style.

    For the media queries, they represent the “screen” size so fire off at the appropriate time. Absolutely, you can adjust it to fire wider or narrower however you like.

    #122371

    erez88
    Participant

    Ulrich, Bryan and Thomas — Thank you!

    #122394

    Bryan Hadaway
    Keymaster

    Welcome.

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.