Subtitle and Larger Logo

Any way on the free version of the “west” theme to add a subtitle to the default header much like you have on the main header of the athemes.com site? Also would like to make the logo somewhat larger than the default size.

Thanks!
Juston

Dear Jutson,

It can be accomplished by 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($){

  if( $('.header-text').length ){

    var secondaryText = 'Secondary header text';

    $('<h3 class="header-text-secondary">'+secondaryText+'</h3>').insertAfter('.header-text');
    
  
  }

})(jQuery);  

  1. Update
  2. Apply the below CSS code into your site’s additional CSS option or child theme’s style.css

.header-text-secondary{
  color: #fff;
  font-size: 30px;
}

To enlarge the logo, you can use the below CSS code:


.site-logo{
  max-height: 120px;
}

Adjust the value necessarily.

Regards,
Kharis

Hi Kharis,

Thanks for your help! I will give it a try

Hi Kharis,

One more thing, if possible, is there a way to get the logo to show in the middle of a centered navigation? something like this:

NAV | NAV | NAV { LOGO } NAV | NAV | NAV

Thanks!
Juston

Dear Jutson,

Yes, it is possible to do.

  1. Log into your site admin area
  2. Go to Appearance > Customize > Header area > Menu style > Menu style > enable “Centered (menu and and site logo)” > Save
  3. Navigate to Appearance > Menus
  4. Edit your current active primary menu
  5. Create a new custom links menu item. In the URL field, enter #logo. In the “Navigation Label” field, put any text of your choice, e.g. your site name. Then place it in the middle of other menu items. Please see this screenshot for the sake of visual https://cloudup.com/cmuBtqTLfkD
  6. Install and activate the TC Custom JavaScript plugin
  7. Go To Appearance > Custom JavaScript
  8. Paste the following code into the provided box

jQuery(function($) {

  var middleMenu = $('a[href="#logo"]');
  var logo       = $('.site-header .col-md-4 > a').html();

  if ( matchMedia( 'only screen and (min-width: 1025px)' ).matches ) {
    if(middleMenu.length){

      middleMenu.parent('li').addClass('site-logo-middle-menu');
      $('.site-header .col-md-4 > a').remove();
      middleMenu.html(logo);

    }

  }

  if ( matchMedia( 'only screen and (max-width: 1024px)' ).matches ) {

    middleMenu.parent('li').remove();

  }

});

  1. Update
  2. Add the below custom CSS code into your site’s additional CSS option:


.site-logo-middle-menu{
  position: relative;
  display: inline-block;  
  text-align: center;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 200px;
}

.site-logo-middle-menu > a{
  position: absolute;
  z-index: 999;  
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  margin-top: calc(-50% + 60px);
  margin-top: -moz-calc(-50% + 60px);
  margin-top: -webkit-calc(-50% + 60px);  
}  

Regards,
Kharis

You’re the best!

Thanks,
Juston

You’re welcome!

Please feel free to open a new topic if you need anything else.

Regards,
Kharis