WordPress.org

Support

Support » Themes and Templates » Customizr » Align Center Logo and menu bar

Align Center Logo and menu bar

Viewing 15 replies - 1 through 15 (of 15 total)
  • Need your site link to see what you need. Everyone has different logo sizes so there isn’t a standard answer. You need to adjust the CSS with margin & padding is most likely answer.

    1) First of all, I’d like to separate LOGO and menu bar in 2 lines. 1st. row-LOGO, 2nd row-menu.

    2) Center both LOGO and Menu.

    3) How to change font and font size?

    Thank you

    http://www.konalaniretreat.com/web/

    Hello Leothecat;

    I’ve took a look at your site. Your theme is not so simple to make what you need. Is needed some changes directly on the theme to make it work.

    [ Solicitation deleted, these forums are not for attempting to find work ]

    Moderator Jan Dembowski

    @jdembowski

    Brute Squad and Volunteer Moderator

    @ellp Give this a read before posting on these forums.

    http://codex.wordpress.org/Forum_Welcome

    Please do not attempt to solicit work in these forums again. This is a 100% volunteer effort and posts like that are against the rules.

    Read this & see if it meets what you need:
    http://wordpress.org/support/topic/increase-logo-size

    thanks,rdellconsulting,

    I put those in custom CSS,

    .navbar-wrapper .brand {width:100%; float:left;}
    .navbar-wrapper .navbar {width:90%; float:right}

    Logo is set in Center, thanks.
    but, it seems to have padding or margin setting somehow both end of Nav. bar. and it’s not centered.

    What should do I next?

    http://www.konalaniretreat.com/web/

    .navbar-wrapper .navbar {
      float: right;
      width: 70%;
    }

    will centre the navbar.

    Hopefully, that fixes the padding problem too?

    What viewports (ie screen widths) are you expecting to work on?

    The above works on my widescreen 1936×1066. But as you shrink the screen, it doesn’t quite work. So you need to write some @media in your CSS that handles different viewports by changing the width: x%.

    This is what I use:

    /* ============================================== */
    /* Responsive - Media queries
    /* ============================================== */
    
    /* ============================================== */
    /* Large desktop                                  */
    /* ============================================== */
    @media all and (min-width:1024px) {
    .navbar-wrapper .navbar {
      float: right;
      width: 70%;
    }
    }
    
    /* ============================================== */
    /* iPad Landscape and Narrow browser              */
    /* ============================================== */
    @media all and (max-width:1024px) {
    .navbar-wrapper .navbar {
      float: right;
      width: 70%;
    }
    }
    
    /* ============================================== */
    /* iPad Portrait and Narrower browsers            */
    /* ============================================== */
    @media all and (max-width:768px) {
    .navbar-wrapper .navbar {
      float: right;
      width: 70%;
    }
    }
    
    /* ============================================== */
    /* iPhone5/Android landscape (& narrow browser)   */
    /* ============================================== */
    @media all and (max-width:568px) {
    .navbar-wrapper .navbar {
      float: right;
      width: 70%;
    }
    }
    
    /* ============================================== */
    /* iPhone4/Android landscape (& narrow browser)   */
    /* ============================================== */
    @media all and (max-width:480px) {
    .navbar-wrapper .navbar {
      float: right;
      width: 70%;
    }
    }
    
    /* ============================================== */
    /* iPhone5/iPhone4/Android portrait               */
    /* ============================================== */
    @media all and (max-width:320px) {
    .navbar-wrapper .navbar {
      float: right;
      width: 70%;
    }
    }
    
    /* ============================================== */
    /* Smaller devices                                */
    /* ============================================== */
    @media all and (max-width:240px) {
    .navbar-wrapper .navbar {
      float: right;
      width: 70%;
    }
    }

    You’ll need to change 70% to what works in the smaller viewports.

    Hi,
    I tried the above, but the result was the same.
    when you change the screen size, Logo and main content moves in Center, but not Nav.

    Thank you.

    I’m not sure if this is the exact same issue, but I would also like to have 2 lines the logo on top and centered and the navigation/menu below it on a separate line. Something that works for all screen sizes. I tried the codes above and they didn’t separate the menu and logo into two lines with the nav below the logo.

    Thank you!

    Nevermind! This worked!

    .navbar-wrapper .brand {width:100%; float:center}
    .navbar-wrapper .navbar {width:100%; float:center}

    Hi erinrouss,

    I can center only Logo, but not nav.
    so, you could center nav. too.
    can I see your site?

    To you center the nav will be a tricky work. I suggest you to replace this navigation for this one:

    http://wordpress.org/plugins/responsive-select-menu/screenshots/

    I think it will be much easy and faster to implement than fix the current one.

    Foreverenfleur

    @foreverenfleur

    Hello!
    I too can’t get my logo centered. I don’t even know how to get into the code section of my blog. Can someone help me please? I’m a computer idiot! My website is http://www.foreverenfleur.net I want to keep the logo the same size but center it.
    Thanks so much!!
    Tanya

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘Align Center Logo and menu bar’ is closed to new replies.
Skip to toolbar