Home Forums Weaver Xtreme Theme Problem with header image overlapping the container

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #17850
    pek
    Participant

    I have a problem with with my page-title being partially covered
    by the Header-image.  This only happens when the page is wide enough
    for the primary menu to fit one one line. It also doesn’t happen on the home page.
     My website is http://www.womenstherapyservices.com
    Some technical notes that might be important (going down the page):
     – The Header-image is provided as HTML code in
         Wvr Theme Options -> Main Options -> Header -> Header HTML
    – I have done nothing special to produce the Primary Menu.
       It seems to want to live in a stripe near, but not at, the
       bottom of the Header image.
     – What I refer to as the “page-title” is provided by HTML insertion
       (with [php]) in Wvr-opts -> Advanced -> HTML Insertion -> Container Top
     – I have suppressed the normal “Title” with CSS:
    .page-header {  display: none; }
         (at Wvrx-opts -> Main Options -> Fonts & Custom -> Custom CSS Rules
    Ironically, this problem didn’t show up before today because I just
    shortened the menu items so they would fit on one line with common
    font sizes.  When it goes to two lines, the menu covers up the bottom
    of the image and looks kind of ragged, but at least my page-title
    (the top of the Container) gets pushed down out of the way.

    Any ideas on what I can do to keep the Container from being overlapped
    by the Header-image even when the menu fits on one line?

    1. Thanks for your help.

    #22462
    pek
    Participant

    oops, we just fixed this just by adding   at the front of the container code.  Wish all problems were that easy to solve.

    Sorry for any bother.  
    #22463
    scrambler
    Moderator

    You have done some funky stuff with your header image and the text over it, basically did things backward.

    You used a class hdr-img that makes the image position:absolute, so the area does not know the height of it.

    The height of the area is only caused by the text that you have on it and which is positioned relative.

    To have the header image and text over it, you should have done the reverse.

    Have the image positioned relative so it gives its height to the area, then use
    position:absolute;right:10px;
    for the block of text so you could have it over the header image.

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