Help moving the logo, phone number together above the menu

HI,

I need to make the logo and the phone number be in the same section above the menu section, can you help me with this? I also need to adjust the padding on the menu section, the logo and phone number section, and the ability to move the phone number so its justified right, and the logo is justified left, can you help?

so the top of this site;

http://www.mywebsiteguystestdomain.ca/

so it looks like this one;

https://totalblindcare.ca/

Thanks!

Hello there,

Try doing the below steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
    (function( $ ) {
      
    	'use strict';
    	if( $('.header-contact').length ) {
    		 $('.site-header').css({'margin-top': 0});
    		 $('.site-header .header-wrap').css({'margin-top': 20});
    		 $('.header-contact').remove().clone().prependTo('.site-header');
    	}

    })( jQuery );
  1. Update
  2. Then add this CSS code to Appearance > Customize > Additional CSS from dashboard.
    @media only screen and (min-width: 1025px) {
      .site-header .header-contact-info {
        float: none;
        margin-left: auto;
        margin-right: 0;
        width: auto;
        display: table;
      }
      .site-header .header-contact-info > span:last-child {
        margin-right: 0;
      }
    }

Regards,
Kharis
aThemes Support

Hi,

This is a good start! can we move the logo up and make the whole menu section smaller as it is quite large, I also need to shorten the padding between the menu and the next section as well as the photo section is too large and I cant figure out how to change that as well.

Thanks for your help!

James

Hi,

Can you get back to me as soon as you can as this site needs to go live very soon and I cant publish it until we sort out the menu size and logo placement as well as padding and size of the first section.

Thanks!

Hello there,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (min-width: 1025px) {
      .site-header {
        top: 0 !important;
        padding-top: 0;
      }
      .site-header > .header-contact {
        margin-bottom: -50px;
      }
      .site-header > .header-contact .header-contact-info {
        padding-right: 14px;
      }
    }

Regards,
Kharis
aThemes Support

ok, great, that worked well, now the space between the sections is too large, how do I change the size of them without affecting the jpeg’s or the text?

Thanks again!

HI Kharis,

All this additional CSS has done something to the mobile menu layout. Can you take a look and help me out with fixing it?

Thanks…James

Hello James,

Please try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    .site-header.float-header {
      padding: 0 0 20px 0 !important;
    }

Regards,
Kharis
aThemes Support