Tagged: ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • July 4, 2016 at 11:15 am #656450
    Wheelie_NL

    Hi all,

    Im working on a new layout and I am trying to add the company’s slogan to the header. I’d like to have it where the social icons normally are. What’s the best way to do this?

    Thanks!

    July 4, 2016 at 9:32 pm #656760
    Jordan

    Hey Wheelie_NL,

    Thanks for getting in touch with us!

    You can go to Enfold theme options then to Header -> Extra/ Phone Info and add the slogan there.
    Or you could add a widget area to the header following these instructions – http://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/

    Let me know if you need further assistance.

    Best regards,
    Jordan

    July 4, 2016 at 10:05 pm #656770
    Wheelie_NL

    Hi Jordan,

    Thanks for your assistance so far.
    I’ve created a widget in the header and am using the following CSS:

    #header .widget {
  left: 50%;
  padding-top: 35px;
  position: absolute;
  z-index: 999;
}

#header .widget h1 { font-size: 25px; color: #a3becc; }

    Everything looks great but there’s one little problem left I can’t solve. When viewing on a small screen like a tablet, the slogan and hamburger menu overlap each other. Is there a way to fix this?

    Thanks!

    July 5, 2016 at 9:45 am #656915
    Rikard

    Hi,

    There’s not a lot of space in the header on mobile so I would try hiding your widget on mobile: 

    @media only screen and (max-width: 767px) {
#text-4 {
display:none; 
}
}

    and add a Color Section element first on the page and add your text there also. You can give the Color Section an ID in the element options and then hide it for screens larger than mobile with the following CSS: 

    @media only screen and (min-width: 768px) {
#your-id {
display:none;
}
}

    Best regards,
    Rikard

    December 22, 2017 at 1:37 am #891448
    Kahil

    Is there an updated version of this that is responsive? I’ve tried the code in the theme documentation…but to be honest, it’s kinda sloppy/lazy. Yes, it allows you to add a widget to the header, but it doesn’t stay in line with anything once the size of the window changes and in mobile view, it just overlaps anything there. I’m surprised that something better hasn’t been baked in to account for a layout where you have the logo on the left and the menu below. It leaves all that space on the right that is prime space for things like a call to action. The available hooks don’t seem to work all that great. Even this one doesn’t allow for you to align the widget to the right and keep it within the max width settings for the content.

    December 28, 2017 at 12:22 am #892274
    Mike

    Hi,
    Typically we solve the responsive issue with css media query breakpoints. Can you create the widget area with the call to action so we can assist?

    Best regards,
    Mike

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