Home Forums Support Header

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1251135
    ameena

    Hello,
    First of all thank you for this great theme and sorry for my English!

    I’m trying to make a header like this one but I can’t do it. I tried hooks and widgets but there’s always something wrong.

    Is it possible?

    Thank you in advance for your help!

    #1251319
    ameena

    I’m attaching a capture of what I’d like to do to make it clearer.

    View post on imgur.com

    #1252323
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    I wonder if a simple Header widget would do the trick? Have you tried adding a navigation widget and search widget in the “Header” widget area?

    It might require some CSS, but it’s probably your best bet.

    Let me know πŸ™‚

    #1252733
    ameena

    Thank you for your response.
    Indeed with widgets and a little css it’s possible πŸ˜‰
    I still have a question, how to make sure that the widget in the header does not “move” the logo?

    Thanks

    #1252843
    ameena

    I’m coming back because I think I did what I wanted to do. I don’t know if it’s perfect and optimized but here’s the code for what it could help!

    @media screen and (min-width: 768px) {
    .inside-header {
    padding: 0px !important;
    margin-bottom: 30px !important;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    }
    .header-widget {
    max-width: 500px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    }
    .site-logo{
    position: absolute;
    left: 50%;
    margin-left: -110px;
    z-index: 99
    }
    .header-image {
    margin: -18px auto 25px 0;
    }
    .top-bar{
    margin-bottom:30px;
    }
    }
    #1253779
    Tom
    Lead Developer
    Lead Developer

    Looks great! That’s likely how I would have done it πŸ™‚

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