Support » Theme: Fruitful » Centering Header Logo and Menu bar?

  • Resolved MazterRic

    (@mazterric)


    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!

Viewing 15 replies - 1 through 15 (of 22 total)
  • Hi MazterRic

    Please provide a link to your site.

    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!

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

    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!

    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;
    }

    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

    You’re welcome.

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

    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.

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

    try this

    .main-navigation {
    width: 822px;
    }

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

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    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

    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!

    ndaai

    (@ndaai)

    Dear salsaturation,

    where i put the code for the drop down menu ?
    thanks 🙂

    salsaturation

    (@salsaturation)

    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;
    }
Viewing 15 replies - 1 through 15 (of 22 total)
  • The topic ‘Centering Header Logo and Menu bar?’ is closed to new replies.