Home Forums Weaver Xtreme Theme Placing widget area on top of header image

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #62712

    Here’s my url: https://madelynbalitz.com/speaking/

    Here’s what I did so far:

    1. Added a featured image and then set it to show as the header image;
    2. Created a “speaking” per page widget and added it on the page above;
    3. Added .speaking to the CSS box.

    Now I want to move the header widget to be on top of the header image. I will place a signup button in the widget area.

    How do I get the box to move? Is there an easier way to do this?

    Thanks, Joe.

    If you mean you want to move the Request Information button over the header image, the rules below will do that
    #header-inside {position:relative;}
    #header-widget-area {position:absolute;right:50px;bottom:50px;}
    FYI, your hamburger Icon (mobile menu) is white on white, you can change that with
    .menu-toggle-button {color:black;}

    If you want your text to scale with the browser you can use something like below for the text font size

    font-size:calc(3vw + 20%)



    Thanks, it’s getting closer to what I want. A couple things need attention:

    1. The header image is not full to the left margin. I’m using a shortcode from a plugin to build the button; maybe that is interfering somehow?
    2. Also, I will be adding different buttons to other pages, so I would need to change the CSS, right? Otherwise this CSS you gave me would apply to all pages, right?
    3. For the scaling CSS you gave, what does that work on? The text inside the button? And where do I place it?



    Nevermind on #1 above.


    2- depends how you are inserting different button, if they are in different widget areas then we would need different rules.

    Once you have implemented we can check

    Also, depending on the layout, you may need to use different positioning. like right now because the header is not very tall, you should use a top positioning instead of a bottom

    3- This is the CSS for the font inside the button. You can put it inline in the style attribute of the html span tag, if you have access to it, or you can use the class of the container to make a rule like below for the page you linked to

    a.su-button spanĀ {font-size:calc(3vw + 20%) !important}


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