Home Forums Weaver Xtreme Theme banner stretches over the entire header, covering the logo

Topic Resolution: Answered
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #67883


    My website (gradeaed.com) has got a dynamic banner in the header right now. Just click through to my website and you will see the banner I am talking about.

    But if I replace this banner with a static one (which is also 728 x 90 in size, just like the current banner) this static banner overlaps my site’s logo (also visible on my website), and stretches over the entire width of the header.

    Can I please get help in fixing this undesired aspect? Like, where exactly is the problem, as I’m not doing anything else other than replacing the HTML code in the “custom HTML” widget that exists in the header area. That’s all I’m doing, and yet, the 2 banners behave differently.



    We need to see the site with the static banner to know what is wrong and provide a fix


    I replaced the banners. Please check again

    Best Answer

    This reply has been accepted as the best answer.

    You have forced the Logo at the same level as the header widget area using a negative bottom margin on the header widget area.

    BUT, you did not limit the width of the header widget area, so it is always full width.
    Your image (despite its name) is 1517px x 188px, so it occupies the whole area and ends up over the logo.

    There are a few steps you can take to correct these errors.

    First if you have the Plus plugin, the best and proper way to do that header in a responsive fashion, would be to use the Header Widget area with two widgets, one for the logo, and one for the image, and use the custom widget width plus option to give each one the width % you want.

    If you do not have the Plus plugin, you need to limit the Header widget area width using its width % option box, and align it right, so that the widget area leave a place for the Logo.
    But that wont be responsive because the logo has a fixed size.

    You could remedy that by adding the custom CSS rule below to the theme Global Custom CSS Rule box, so that as the browser size changes, the logo size changes proportionally like the header widget area will.

    Setting the percentage value so the sum of the header widget area width and this one is below 100% (like 70% for the header widget area, and 25% for the title/logo

    #title-tagline {width:25%;}



    I don’t have that plugin… I think.

    But the code you gave me worked. I still needed to add more codes to make the header look the way I want it to look like on various devices, but I didn’t mind that. I am actually mesmerized by the fact that simple lines of text can have such impact over the visual appearance of websites 🙂

    I don’t understand, however why the theme displays different banners differently. Is it because of their size? Would have it displayed the banner properly had I resized it to 728 x 90? Oh, and I genuinely thought it was 728 x 90 in size, but I just checked and it is indeed the size you said it is.


    The theme does not display things differently, it displays them the way they are 🙂

    Your problem was that you did not set the width of the widget area properly so you could control the maximum width regardless of the size of what you put in it.

    And CSS is the language that was created to format HTML web pages, so you can change pretty much anything using it, including creating animations 🙂

    If you are going to be developing sites, you may want to get familiar with it


    I’m not going to develop sites… not in the foreseeable future anyway. But being able to radically change the appearance of a website with a few lines of text does give a certain power 🙂

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