Tagged: ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • August 23, 2016 at 2:01 pm #676406
    harryriegel

    I would like to create a transparent .png on top-left and another one on top-right of the screen.

    (The .png I´m talking about are two curtains – one curtain for each top-corner)

    1. Respecting the screen-size and not the container-width. 2. Each .png should lie on top of all other page-elements, 3. Should be scrolling with the page (not static or parallax) and 4. Should be a constant part of the header.

    Any idea of how to achieve this?

    Thanks for your help :-)

    August 24, 2016 at 2:16 pm #676969
    Rikard

    Hey harryriegel,

    You could try adding a widget to the header and style it going full width and then place your image inside of it: http://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/

    Best regards,
    Rikard

    August 29, 2016 at 4:15 pm #679002
    harryriegel

    Hi Rikard!

    Thank you for the friendly support!

    I tried it out and it worked somehow… but the curtain-png (which has a width: of 1920px; hight: 320px) is trapped inside the set maximum-container-width and does not stretch 100% fullscreen as usually planed.

    Any idea?

    August 29, 2016 at 4:25 pm #679009
    harryriegel

    A quik thought: Should I divide the curtain-png in two separate images and place them left and right outside of the container? How can I do this?

    August 29, 2016 at 4:35 pm #679020
    Yigit

    Hi!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    .container.av-logo-container {
    max-width: 100%;
    padding: 0;
}
@media only screen and (min-width: 990px) {
.main_menu {
    margin-right: 16%;
}
.logo {
    margin-left: 16%;
}}

    Best regards,
    Yigit

    August 29, 2016 at 5:44 pm #679063
    harryriegel

    Thank you for your great support. It looks better already – I also decided to switch to boxed layout.

    Unfortunately the curtain-image is still trapped inside the main-content and to make it appear OVER main-content and body is not possible yet…

    Another question: How can I make the header .widget dissappear at a certain min. width? This is important as on mobile devices and a certain screen-size it “floats” in container, hides logo an menu-parts and looks irritating.

    Thanks for help :-)

    Regards,
    Harry

    • This reply was modified 8 years, 2 months ago by harryriegel.
    August 29, 2016 at 11:12 pm #679186
    Yigit

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    @media only screen and (max-width: 990px) {
#header .widget { display: none; }}</code></pre>

    Best regards,
    Yigit

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