3 Widget Header for Ally theme

Homepage › Community Forums › Ally Theme Support › 3 Widget Header for Ally theme

Tagged: 

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • August 16, 2013 at 12:51 am #6585
    mylin
    Customer

      Hi, I’m trying to add 3 widgets to the Header to display the Logo in the center and two widgets to the left and right of the logo. Is the below code correct? I can’t get it to work. Thanks for your help!

      //Replace Genesis Header with a custom one that adds an additional widget area

      remove_action (‘genesis_header’, ‘genesis_do_header’);
      add_action(‘genesis_header’, ‘genesis_3col_header’);
      function genesis_3col_header() {
      echo ‘
      ‘; genesis_site_title(); genesis_site_description(); echo ‘

      ‘;
      echo ‘
      ‘; echo ‘
      ‘; dynamic_sidebar(‘Header Center’); echo ‘
      ‘; echo ‘

      ‘;
      if ( genesis_get_option(‘header_right’) ) {
      echo ‘
      ‘; dynamic_sidebar(‘Header Right’); echo ‘

      ‘;
      }
      }

      //Register the additional Widget Area

      genesis_register_sidebar(array( ‘name’=>’Header Center’,
      ‘description’ => __(‘This is the Header Centered Widget area.’, ‘genesis’),
      ‘id’ => ‘header-center’
      ));

      //CSS

      #header-center {
      float: left;
      display: block;
      }

      August 16, 2013 at 10:37 pm #6601
      Eric
      Customer

        I’m not sure if your code works or not because the code doesn’t show up correctly here in the forum when you post it in this way. You have to highlight your code and wrap it by hitting the “code” button in the content editor. Either that or you could add it to a site like pastebin or github, then paste the link here so everything shows up correctly and can be tested. The apostrophes and a few other things are what’s showing up wrong when you paste it in the regular content area. So try one of those solutions above for the future.

        If your code isn’t working, try starting from scratch by using a tutorial. Here is one you could start with – http://www.carriedils.com/add-widget-area-below-nav/ …there are many more out there that you could find by doing a Google Search. That should definitely get it working, and then all you would have to do is style it in your css. If it’s still not working after you try that let me know.

        Also, post a link so we can see what’s happening on the frontend.

        I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com

        September 3, 2013 at 12:18 pm #7077
        mylin
        Customer

          Hi, sorry for the late reply. I found a code that works by adding a left header widget, http://wpsites.net/web-design/add-header-left-widget-genesis/. The website you replied with helped me enter in the phrase to search on Google.

          Now my only issue is making the left header widget mobile responsive. Can you help me with that? I’ve tried searching on Google and tweaking with firebug but the left header is static and covering the logo when viewed on a phone. The website is http://www.leeperla.com.

          Thank you!

          September 3, 2013 at 8:36 pm #7095
          mylin
          Customer

            I forgot to add to the above question. Since I’ve added the left header widget and moved the Logo to the center, the Logo is not clickable anymore. I adjusted the header-image title link width to 1px to move the Tudor logo to the left. If I change the width to a higher pixel, it’ll move the Tudor logo to the right. Can you advise on how to make the logo clickable both on desktop and mobile screen? Thanks!

            September 3, 2013 at 10:45 pm #7101
            Eric
            Customer

              Unfortunately I can only help with some of it, since I can’t figure out how to get everything to align properly and be responsive. So I’ll just post what I can help with and hopefully someone else can help with the rest.

              To get the logo to be clickable again, look around line 250 in your css and make the code look like this – 

              .header-image #title-area, 
.header-image #title, 
.header-image #title a {
display: block;
    float: none;
    height: 160px;
    margin: 0 auto;
    overflow: hidden;
    padding: 0;
    text-indent: -9999px;
    width: 400px;
}

              That makes the logo clickable, but it makes your other two items on the sides get pushed down, and I honestly don’t know the best approach to get this to work in this way and be responsive. So if anyone else can help us out please feel free!

              I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com

            • Author
              Posts
            Viewing 5 posts - 1 through 5 (of 5 total)
            • You must be logged in to reply to this topic.