WP SITES

2899

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

Custom Header Modifications To Executive Pro Theme

This tutorial includes the work a client hired me for recently.

Here’s what the client wanted:

custom-header

And here’s how the client wanted the header to look on smaller screens:

mobile

The work involved:

  • Modification of the custom header function
  • Addition of 2 widgets before the header
  • Use of search widget and text widget in the before header left widget
  • Use of the language selector in the right before header widget
  • Addition of CSS for media queries
  • Modifications made to default CSS

Register for full access

Reader Interactions

Comments

  1. Hi Brad-

    How would I simply center it on all screens/devices? I have a natural image size of 768X 160. The Theme shrinks the size down. So I had to enlarge it to ensure that it was croppable to the 768x 160. I have been able to this but not able to center it.

    I can provide you with the website link via private email, so that you may see what it look like now.

    here is the code i used: (functions.php ) width of 1140 and height of 180 were used to allow the image to be able to not shrunken down from its original size of 768 X 163.

    What I added on my own. and doesn’t do anything.

    .header-logo {
    padding: 0;
    margin: 0 auto !important;
}

    Please let me know if you have a solution for this.

    Thank you.

    Becky

Leave a Reply