Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • February 27, 2018 at 8:09 pm #918624
    aneiling

    Hi there,

    We are looking to add three components (images with links) above the header with links to new websites while keeping this website active for now. I tried to add widgets and custom css based on previous support topics, but I was unsuccessful. Could you help?

    olsenstudios.com

    Anne

    March 1, 2018 at 5:27 am #919367
    Rikard

    Hi Anne,

    I was able to load the backend of your site but not the frontend unfortunate, I get the error message which you can see in private.

    As for your problem; do you have a mockup or screenshot highlighting your intentions?

    Best regards,
    Rikard

    March 2, 2018 at 7:24 pm #920502
    aneiling

    Hi there. The website is working…hmmm. I posted a link below to the site plus a link to a mockup of how we would like it to look. Whether you leave us room for three images or a way to add in the components like photos, text and a button. I just need the buttons to link to the respective sites.

    March 4, 2018 at 9:24 pm #921162
    Basilis

    Hi,

    I can also not load the web site.
    The connection expires and I cant seem to be able to see anything at all.

    Best regards,
    Basilis

    March 5, 2018 at 6:41 pm #921680
    Vinay

    Hi,

    Thank you for sharing the mockup and the link to your site.

    To place an image as shown in the mockup above the header and link it to different sections of the site please perform the below steps.

    1. You need to activate the sticky and shrinking header from Enfold > Header > header behavior > Sticky Header > Shrinking Header
    2. You need to slice the image or convert the image to HTML format.
    3. Create a header widget area as mentioned in this link https://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/ (Do not use the CSS provided in the link instead use the CSS code provided below in this ticket).
    4. Once you have the code for the image you can place it in the header widget area from Appearance > widget > header (Drag and drop a text widget and place your HTML in text view).
    NOTE: You code should be wrapped inside a div with CSS class name “above-header”.

    5. Adjust the height and margin values in the below CSS to suit your design and place it in your child theme styles.css

    #header {
    margin-top: 150px;
}

.above-header {
	background: gold;
	position: fixed;
	height: 150px;
	top: 0;
	left: 0;
	right: 0;
}

#header.header-scrolled {
	margin-top: 0;
}
.header-scrolled .above-header {
    display:none;
}

    Let us know if you have any questions ;)

    Best regards,
    Vinay

    • This reply was modified 7 years, 4 months ago by Vinay.
    March 8, 2018 at 8:30 pm #924040
    aneiling

    See private message.

    March 9, 2018 at 9:52 am #924357
    Vinay

    Hi,

    Unfortunately, it would require quite some time and customization of the theme to achieve this, so I am sorry to tell you that this is not covered by our support. As you are an Enfold customer we have tried to help you beyond our support scope to achieve the layout you designed.

    Please enable debug mode by adding the code provided in this link to your functions.php file which can be accessed from Appearance > Editor http://kriesi.at/documentation/enfold/enable-advanced-layout-builder-debug/

    This lets you view the shortcode for all the page elements.

    Design the section above the header on an empty page and place the shortcode in the header widget.

    If you are still unable to design the section above the header and it’s really important for you to get this done, you can always hire a freelancer to do the job for you :)

    Best regards,
    Vinay

    March 9, 2018 at 5:53 pm #924644
    aneiling

    The debugging mode worked. Hurray! Now I just need your thoughts on tweaking it so it goes above or below the header (not over it) and we’re good to go. I played around with the above header settings, but I was unsuccessful in getting it placed so it’s not on the header. Thoughts?

    You guys have been great!
    Anne

    March 9, 2018 at 6:57 pm #924667
    aneiling

    One more thing, can we remove the new header from the front page only? Thanks for your help!

    Anne

    March 12, 2018 at 4:43 pm #925597
    Vinay

    Hi,

    We have added the below CSS in Quick CSS to move the widget above the header.

    /* Banner above header */
#header {
    margin-top: 655px!important;
}

#header .widget {
	position: absolute;
	margin-top: -655px;
	left: 0;
	right: 0;
        background:#fff;
}

    Best regards,
    Vinay

    March 21, 2018 at 8:43 pm #930835
    aneiling

    It looks great. Thanks so much for your help. Can you help in getting the new header to appear on a mobile device? So far it won’t load vertically, and it shows up garbled on a horizontal view. We are almost there!

    Thanks.
    Anne

    March 23, 2018 at 2:32 am #931733
    Ismael

    Hi,

    You should hide the widget on mobile view. It’s just too large for mobile screens.

    @media only screen and (max-width: 1024px) {
  /* Add your Mobile Styles here */
  #header .widget { display: none !important; }
}

    The logo is small because of the following css modifications.

    .responsive .logo a, .responsive .logo img {
    margin: 0 auto;
    max-width: 60%;
    height: auto !important;
    margin-top: 10px!important;
}

    Adjust the max-width value.

    Best regards,
    Ismael

    March 23, 2018 at 5:39 am #931772
    aneiling

    Thanks for your reply. It is actually important to display this widget on mobile devices. Any way we can format it to show? Even if it’s one box of the widget on top of each other?

    March 23, 2018 at 2:40 pm #931982
    Vinay

    Hi,

    The header widget images are really big to sit in there. Please hide one of them on the mobile device as Ismael suggested.

    I have added the below code to the existing media query please review the site.

    .responsive #top #wrap_all #header {
    margin-top: 655px!important;
}

.responsive #top #wrap_all #header .widget {
	position: absolute;
	margin-top: -655px;
	left: 0;
	right: 0;
        background:#fff;
}

    Best regards,
    Vinay

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