Align Center Logo and menu bar

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

https://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 ]

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

https://codex.www.ads-software.com/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:
https://www.ads-software.com/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?

https://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:

https://www.ads-software.com/plugins/responsive-select-menu/screenshots/

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

Read this about float:center:

https://www.codeitpretty.com/2012/05/you-cant-float-center.html

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 https://www.foreverenfleur.net I want to keep the logo the same size but center it.
Thanks so much!!
Tanya