Header and nav alignment on desktop and mobile

Shapely
1

Having a couple of issues with alignment and responsiveness after increasing the size of the site’s logo.

First, I increased the size of the site logo by adding this to the child theme’s functions.php:

// change logo size in header
function logo_size_change(){
	remove_theme_support( 'custom-logo' );
	add_theme_support( 'custom-logo', array(
	 'height' => 94,
	 'width' => 221,
	 'flex-height' => true,
	 'flex-width' => true,
	) );
}

add_action( 'after_setup_theme', 'logo_size_change', 11 );

And added this CSS to the custom CSS:

.nav-bar .module, .nav-bar .module-group {
  height: 94px;
}
.logo {
max-height: 94px!Important;
height: 94px!important;
width: auto!Important;
}

Now, I’d like to do three things:

  1. Fix the large white space under the logo in the mobile view
  2. Ensure all navigation items appear on mobile view (they’re cut off currently)
  3. Align the nav menu items to the bottom of the header on desktop view

The website is http://digitalhealth.nyc

Thanks for your help! (And building an awesome theme).

2

Hi,

  1. & 2. This will fix it, https://colorlibsupport.com/t/logo-size-and-header-space-mods/#post-117737
  2. For that use this Custom CSS,
.main-navigation .menu { margin-top: 30px; }
.module.widget-handle {
    margin-top: 30px;
}

Let us know,

Thanks,
laranz.

3

Hi Iaranz -
Things are still a bit cut off with the logo and navigation.

When I add the

.main-navigation .menu { margin-top: 30px; }
.module.widget-handle {
    margin-top: 30px;
}

It reverts back to having too much white space under the logo and cutting off navigation. Thank you for your help!

Cara

4

Hi,

Try this Custom CSS,

.main-navigation { height: 100px; }

If you want to increase the height for only mobile means use this,

@media only screen 
  and (max-width: 480px) {
.main-navigation { height: 100px; }
}

Let us know,

Thanks,
laranz.

5

So the logo looks great, but now the navigation menu is hidden again.
Here’s what I have in the custom CSS

/*Navigation height to allow for logo*/
.nav-bar .module, .nav-bar .module-group {
  height: 94px;
}

.logo {
max-height: 94px!Important;
height: 94px!important;
width: auto!Important;
}

@media only screen 
  and (max-width: 480px) {
.nav-bar .module, .nav-bar .module-group {
    height: auto;
}
}

@media only screen 
  and (max-width: 480px) {
.main-navigation { height: 100px; }
}
6

Hi,

Try this Custom CSS also,

@media only screen 
  and (max-width: 480px) {
#masthead {
    height: 100px;
}

nav {
    border-bottom: none;
}
}

Let us know,

Thanks,
laranz.

7

Hi Iaranz -

The issue is the same. I added the CSS you posted in your last reply to the CSS I had already added. Is there anything I need to remove?

Thanks,
Cara

8

Hi,

Sorry for a late in response, Can you pass us your website login details in the Private Reply, so that I can login and check what is going wrong.

Let us know,

Thanks,
laranz.

9

Yep, login credentials are:

http://digitalhealth.nyc/wp-admin
cwillenbrock
Le*m&lWcW81%eWi4sf!Qq0p%

Sorry for the even later reply. Got caught up in some other projects, but really appreciate your help!

10

Hi,

I removed this code,

@media only screen 
  and (max-width: 480px) {
.main-navigation { height: 100px; }
}

and add this,

@media only screen 
  and (max-width: 480px) {
.main-navigation { height: auto; }
}

that will fix the issue.

Let us know if you have any other questions,

Thanks,
laranz.