Support » Theme: Customizr » Align Center Logo and menu bar

Viewing 15 replies - 1 through 15 (of 15 total)
  • rdellconsulting

    (@rdellconsulting)

    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.

    Leothecat

    (@leothecat)

    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/

    ellp

    (@ellp)

    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.

    rdellconsulting

    (@rdellconsulting)

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

    Leothecat

    (@leothecat)

    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/

    rdellconsulting

    (@rdellconsulting)

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

    will centre the navbar.

    Hopefully, that fixes the padding problem too?

    rdellconsulting

    (@rdellconsulting)

    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.

    Leothecat

    (@leothecat)

    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.

    erinrouss

    (@erinrouss)

    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!

    erinrouss

    (@erinrouss)

    Nevermind! This worked!

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

    Leothecat

    (@leothecat)

    Hi erinrouss,

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

    ellp

    (@ellp)

    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.

    rdellconsulting

    (@rdellconsulting)

    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.