Menu home page to bottom of header

Is there a way to move the menu to the bottom of the header#masthead.site-header centered under the logo?
website http://mckaybusinessconsulting.com/

Hello there,

Thank you for asking.

From your site admin (/wp-admin), visit Appearance > Customize > Header area > Menu style; then enable “Centered (menu and site logo)”.

Regards,
Kharis

Kharis, I don’t want the logo centered. I need it set at the left hand side. I want to be able to put the contact us on the right hand side. I would like the header to look like the header at this site http://www.southwestsolutions.com/. Thanks

Thank you for adding some extra details. To accomplish it, you’d need to add the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    .site-header .col-md-4,
    .site-header .col-md-8 {
      width: 100%;
    }

    #mainnav {
      float: left;
    }

    #mainnav ul.menu > li {
      padding-left: 7px;
      padding-right: 7px;
    }

    #mainnav ul.menu > li:first-child {
      padding-left: 0;  
    }

    @media only screen and (min-width: 1025px) {
      
      .header-wrap .container > .row {
        display: block;
      }
      
    } 

Regards,
Kharis

Thanks kharis, that did the trick. I would like to put a ‘Contact Us’ section in the location as it appears on the site mentioned below http://www.southwestsolutions.com/ http://www.southwestsolutions.com/.

Thanks,

Hello there,

It looks like it presents in there – above the phone number. Do you still need an assistance?

Regards,
Kharis

On the southwestsolutions.com website, shown below, the contact us, telephone number and search box is in the upper right hand side of the header above the menu. In my website, second image below, I activated the contact information and it shows above the logo. Is there a way to put this information in the location as shown in the first image, on the right hand side in header opposite side of logo and above menu? This would make it have the same look and affects as the current header. If not, would you be able to supply code that does the following:

  1. puts this information to the right hand side of web site and make it sticky when scrolling down
  2. make this area have the same background look as the current header

Thanks !!

Hello there,

Please try doing these 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($){

      if ( matchMedia( 'only screen and (min-width: 992px)' ).matches && $('.header-contact').length ) {

        $('.header-contact').remove().clone().prependTo('.site-header .container');

      }

    })(jQuery);

4 . Update
5 . Add this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (min-width: 992px) {

      .site-header {
        margin-top: 0 !important;
      }

      .site-header .container {
        position: relative;
        padding-top: 15px;
      }

      .site-header .header-contact {
        border-bottom: none !important;
        top: -30px;
        right: 0;
        width: 50% !important;
      }

      .site-header .header-contact span:last-child {
        margin-right: 0;
      }

      .site-header .header-contact .container {
        width: 100%;
      }

      .site-header .header-contact-info {
        width: auto;
        display: table;
        float: right;
      }

    }

Clear any applied cache as it prevents new code additions to take effect.

Regards,
Kharis

Kharisblank,

That worked nicely. I am trying to make this area transparent like the header background.

This is the code when I look at the area with chrome developer tool.

.has-hero .header-contact { background-color: rgba(17, 140, 78, 1);

}

When I change the last number from 1 to 0 using this tool (like below), it becomes transparent.

.has-hero .header-contact {

background-color: rgba(17, 140, 78, 0);

}

When I put this code into theme’s additional CSS and publish, it goes back to original code that makes it solid.

How do I get it to permanent take this change? Is there something in your code below that is preventing it from making the change permanently?

Thanks,

Kathy

Hello Kathy,

Please try this code:

    .header-contact {
      background-color: transparent !important;
    } 

Regards,
Kharis

That worked !! Thank you

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis