WordPress.org

Forums

Customizr
Align Center Logo and menu bar (16 posts)

  1. Leothecat
    Member
    Posted 1 year ago #

    How do you align center top logo mark and menu bar?

  2. rdellconsulting
    Member
    Posted 1 year ago #

    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.

  3. Leothecat
    Member
    Posted 1 year ago #

    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/

  4. ellp
    Member
    Posted 1 year ago #

    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 ]

  5. @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.

  6. rdellconsulting
    Member
    Posted 1 year ago #

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

  7. Leothecat
    Member
    Posted 1 year ago #

    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/

  8. rdellconsulting
    Member
    Posted 1 year ago #

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

    will centre the navbar.

    Hopefully, that fixes the padding problem too?

  9. rdellconsulting
    Member
    Posted 1 year ago #

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

    The above works on my widescreen 1936x1066. 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.

  10. Leothecat
    Member
    Posted 1 year ago #

    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.

  11. erinrouss
    Member
    Posted 1 year ago #

    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!

  12. erinrouss
    Member
    Posted 1 year ago #

    Nevermind! This worked!

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

  13. Leothecat
    Member
    Posted 1 year ago #

    Hi erinrouss,

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

  14. ellp
    Member
    Posted 1 year ago #

    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.

  15. rdellconsulting
    Member
    Posted 1 year ago #

  16. Foreverenfleur
    Member
    Posted 1 year ago #

    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

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags