WordPress.org

Ready to get started?Download WordPress

Forums

Fruitful
[resolved] Centering Header Logo and Menu bar? (23 posts)

  1. MazterRic
    Member
    Posted 8 months ago #

    Hi there.

    How do I make it so that my header logo and menu bar are both centered? By default, smaller header logo seems to align to left and menu bar (options) align to the right.

    Maybe a better way to ask is where would I be able to find the template to edit? I saw the custom CSS option, but wasn't sure how to go about applying that.

    Thank you!

  2. salsaturation
    Member
    Posted 8 months ago #

    Hi MazterRic

    Please provide a link to your site.

  3. MazterRic
    Member
    Posted 8 months ago #

    Hey there.

    Here it is:
    http://www.smydricky.mauvsa.org/

    The way the current logo stands, it's aligned directly to the left of the menu bar in Firefox. However, it's aligned to the left but above the menu bar in Chrome. My goal is to insert a header logo big enough so that it'll stay centered above the menu bar.

    I appreciate the help!

  4. salsaturation
    Member
    Posted 8 months ago #

    thanks - actually can you do a quick mockup of how it is supossed to look?

  5. MazterRic
    Member
    Posted 8 months ago #

    Here you go:

    https://www.dropbox.com/s/50kd9xn6l5no692/mockup.png

    Trying to see if I can center both the logo AND the navigation bar (menu bar) so it doesn't look weird. Yellow would be the slider.

    Thank you!

  6. salsaturation
    Member
    Posted 8 months ago #

    Try this:

    #page .container header hgroup {
    float: none;
    margin: 0 auto;
    }
    
    .site-header img, img.size-full {
    display: block;
    margin: 0 auto;
    }
    
    .main-navigation {
    float: none !important;
    margin: 0 auto;
    width: 100%;
    height: 40px;
    }
    
    .menu-main-menu-container {
    margin: 0 auto;
    width: 740px;
    height: 40px;
    }
  7. MazterRic
    Member
    Posted 8 months ago #

    Hey buddy!

    Thanks for the code.. I added another menu option in and all I had to do was expanding the width for the menu container.

    I appreciate the help! This is solved =D

  8. salsaturation
    Member
    Posted 8 months ago #

    You're welcome.

  9. marco_81
    Member
    Posted 7 months ago #

    Sorry.
    The code is perfect but I didn't understood how to center the menu...
    Anyone can help me?
    Thanks

  10. MazterRic
    Member
    Posted 7 months ago #

    Hey marco!

    How many menu items do you have? Your menu should already be center by the last two custom CSS codes (menu navigation and .menu-main-menu-container). Try changing the width to something bigger (I had to add 100px) so that it goes far enough to wrap in all the menu items.

  11. marco_81
    Member
    Posted 7 months ago #

    Ok, thanks
    I understand, it's not dynamic. right?

  12. salsaturation
    Member
    Posted 7 months ago #

    try this

    .main-navigation {
    width: 822px;
    }

    If you change your menu items you might have to alter this

  13. Andrew
    Forum Moderator
    Posted 7 months ago #

    Alternatively display your menu inline-block and then give a parent element
    text-align: center,
    or
    Display your menu table and use margin: 0 auto

    http://cssdesk.com/dHGRq

  14. andracuamic
    Member
    Posted 7 months ago #

    This is awesome!

    Somehow, the logo is centered really well, but I still cannot center the menu. If I play with the numbers, as I read here, I get this: http://skepticdog.com/wp-content/uploads/2014/01/skeptic-error-menu.jpg

    I don't know what am I doing wrong.

    This is what I inserted in Custom CSS:

    /* This is for centering logo and menu*/
    #page .container header hgroup {
    float: none;
    margin: 0 auto;
    }
    
    .site-header img, img.size-full {
    display: block;
    margin: 0 auto;
    }
    
    .main-navigation {
    float: none !important;
    margin: 0 auto;
    width: 300px;
    height: 40px;
    }
    
    .menu-main-menu-container {
    margin: 0 auto;
    width: 900px;
    height: 40px;
    }

    Thanks!

  15. ndaai
    Member
    Posted 7 months ago #

    Dear salsaturation,

    where i put the code for the drop down menu ?
    thanks :)

  16. salsaturation
    Member
    Posted 7 months ago #

    You put it in custom css or child theme css. This should help with centering

    .menu-main-menu-container {
      text-align: center;
    width: 100%;
    }
    
    .main-navigation ul {
      display: inline-block;
    }
    
    .main-navigation li {
      display: table;
      margin: 0 auto;
    }
  17. andracuamic
    Member
    Posted 7 months ago #

    I know it might be annoying, but it still does not work: http://skepticdog.com/

    I have written this in my Custom CSS:

    /* This is for centering logo and menu*/
    #page .container header hgroup {
    float: none;
    margin: 0 auto;
    }
    
    .site-header img, img.size-full {
    display: block;
    margin: 0 auto;
    }
    
    .main-navigation {
    float: none !important;
    margin: 0 auto;
    width: 100%;
    height: 40px;
    }
    
    .menu-main-menu-container {
      text-align: center;
    width: 100%;
    }
    
    .main-navigation ul {
      display: inline-block;
    }
    
    .main-navigation li {
      display: table;
      margin: 0 auto;
    }

    Thank you very much for the help!

  18. GabiClayton
    Member
    Posted 6 months ago #

    I am having the same problem centering the menu and logo. When I put andracuamic code above in Custom CSS it centered the logo (yay!) but not the menu. See http://olympiafriends.org/

    Suggestions?

  19. salsaturation
    Member
    Posted 6 months ago #

    @GabiClayton

    Add the following to you custom css

    .menu-menu-1-container {
    text-align: center;
    }
  20. andracuamic
    Member
    Posted 6 months ago #

    For me it finally worked like this:

    #page .container header hgroup {
    float: none;
    margin: 0 auto;
    }
    
    .site-header img, img.size-full {
    display: block;
    margin: 0 auto;
    }
    
    .main-navigation {
    float: none !important;
    margin: 0 auto;
    width: 560px;
    height: 40px;
    }

    You just have to play a bit more with numbers here (at width):

    .main-navigation {
    float: none !important;
    margin: 0 auto;
    width: 560px;
    height: 40px;
    }
  21. GabiClayton
    Member
    Posted 6 months ago #

    salsaturation, that worked to center the menu. Thanks, But it also centered the items in the sub menus which I really want to be flush left. Any ideas on how to do that?
    See: http://olympiafriends.org/

  22. Fruitful Code
    Member
    Theme Author

    Posted 6 months ago #

    New theme version 1.3 will be include switcher in theme options for different positions (logo and menu)

  23. andracuamic
    Member
    Posted 6 months ago #

    great! thanks!

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.