Making the header banner 'clickable' to return to home?

Home Forums Automattic Elemin Making the header banner 'clickable' to return to home?

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #106819 Resolve

    Shirley Harring

    I have a custom made banner as a header, which means I do not have the default ‘text showing’ option available. This means that I have had to create a ‘home’ button in my menu, for readers to return to home if they have navigated away from home page. In the default settings, clicking on the header or header text takes the reader home, but if the header text is disabled then clicking the banner doesn’t work.

    Is there a way of adding some CSS so that a click on the banner with return a reader to the home page?

    The blog I need help with is rhubarbwhine.com
    #134452

    Michelle

    Hi there,

    Elemin doesn’t have clickable banners by default, but it’s possible to position a menu item on top of the banner to create the illusion that it’s clickable. The following code takes your “Home” link, hides the text, and turns it into a box on top of the banner:

    #menu-item-7619 {
    width: 100%;
    }
    li#menu-item-7619 a {
    height: 183px;
    left: -75px;
    position: absolute;
    text-indent: -9999px;
    top: -228px;
    width: 100%;
    }

    The “7619” number is important — each individual menu item has an unique ID. If you delete your “Home” menu item, then this code won’t work unless you replace the number with the ID of another menu item.

    The easiest way to find a menu item’s ID is to right-click on a menu item and choose “Inspect Element” from the pop-up menu that appears. You’ll see the HTML and CSS for that particular item. Look for “menu-item-#” where “#” is the ID number.

    I hope this helps, let me know if you have any questions or if I can clarify anything.

    #134481

    Shirley Harring

    Thank you, this makes it work fine. Will this continue to work if I change header images?

    #134506

    Om Kicau

    In my case, Michiecat’s tips don’t work well since there are ads on my blog.

    Then I make this combination of CSS:

    #branding hgroup {

    background: url(image-url) no-repeat;

    background-size: 100% auto;

    height: 150px;

    max-width: 990px;

    overflow: hidden;

    }

    #site-title a {

    display: block;

    width: 100%;

    height: 150px;

    font-size: 0;

    }

    site-title a, #site-description {

    background: none !important;

    border: 0 !important;

    color: #dd3333;

    }

    …where the images that I use contains site title and site description

    #134512

    Michelle

    @rhubarbwhine – It should continue to work if you change your header image, especially if the image is the same size as your existing one. If you add a header image that’s slightly wider or taller, you might have to adjust the “height”, “top”, and “left” values to make sure it covers a large enough area for it to be clickable.

    @duto – Thanks for sharing that tip, it may be helpful for other users in the future!

    #134513

    Shirley Harring

    Thanks (to you both). Much appreciated.

    #134516

    Michelle

    Glad to help! I’ll mark this topic as resolved, but as always, feel free to post other questions in a new topic.

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘Making the header banner 'clickable' to return to home?’ is closed to new replies.