Tagged: 

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #1324650

    Hello Support,

    I was just given a PSD file for a web site. I am not sure how to do the header as designed. It breaks a lot of the conventions I am used to when creating sites with the Enfold Theme.

    Here is a screenshot of the header:
    header screenshot

    May I get assistance in creating this layout/design in Enfold?

    Sincerely,
    Greg

    #1324651

    The image didn’t come through… here is a direct link:
    Google Drive link

    #1324721

    Hi Greg,

    Thanks for the screenshot. There are no settings in the theme to create that by default unfortunately, so you would need custom CSS. We need to be able to inspect the actual elements on your site in order to give you accurate CSS, so if you need further help, then please post the actual site where you have started creating the site in question.

    Best regards,
    Rikard

    #1324749

    Do you need on that page a shrinking header – or could it be a static one?
    The header behavior is set to: “Let logo and menu position adapt to browser window”

    See here the example page: https://basis.webers-testseite.de/buttons/
    the logo: Logo
    the background for header-bg: background

    my ( page IDs included ) css:

    .page-id-2602 .container.av-logo-container {
      margin: 0 50px 0 0;
    }
    
    .page-id-2602 .logo.avia-svg-logo {
      height: calc(100% + 35px);
      position: absolute;
      top: -35px;
    }
    
    .page-id-2602 #header:before {
      background-image: url(//basis.webers-testseite.de/wp-content/uploads/blue.svg);
      background-repeat: repeat-x;
      background-size: 35px;
      background-position: top left;
      z-index: 1;
      content:  "";
      width: 100%;
      height: 100%;
      position: absolute;
    }

    the responsive design isn’t set on this now – but it will work the same way.
    the header_meta ( f.e. phone info had to change color on smaller screens etc. pp. )

    #1324832

    Hi,

    Thanks for helping out @guenni007 :-)

    Best regards,
    Rikard

    #1324833

    Thank you both.

    I am going to get a start on things and circle back for aid.
    Can we keep this open for a week or so while I get some work into the effort?

    #1324883

    Hi Greg,

    No problem, we’ll keep this thread open for you. Just let us know here when you have your new site up.

    Best regards,
    Rikard

    #1325514

    Hello Rikard/Support,

    I’ve got it close.

    I’ve placed the ADMIN info in the Private Content area.

    This is the mockup I am attempting to create: header-mockup.png.

    Right now, I am stuck with having the header bg image show – and have the secondary menu on top of it. So far, I keep losing one or the other as I change z-index… and attempting to place the bg image via my own css didn’t work either.

    My unique css is in the Theme Editor file. There is a Child Theme.

    Any help is appreciated.

    Sincerely,
    Greg

    P.S. can the search element can be screen right like on the mock-up, instead of attached to the menu? gw

    • This reply was modified 3 days, 8 hours ago by  Donkies11.
    #1325584

    Hi Greg,

    Please try this CSS as well:

    #header_meta {
        z-index: 1;
        position: absolute;
        right: 0;
        top: 5px;
    }
    
    .av_minimal_header #header_main .container {
        height: 117px;
        line-height: 145px;
    }
    
    span.logo {
        width: 250px;
        max-width: 250px;
        top: 20px;
    }

    Best regards,
    Rikard

    #1325596

    Hello Rikard,

    Closer – the sub-menu/secondary menu in the upper right corner now is seen – but the links aren’t active for me (Windows 10 / Chrome Version 94 – up-to-date).

    I also tested with FF – same experience.

    (I’m currently attempting to place the main nav in the center of the white bar. It might be accomplished when you look.)

    FYI,
    Greg

    #1325667

    Hi,

    Thanks for the update. Could you add the CSS back so that we can see the problem please?

    Best regards,
    Rikard

    #1325769

    Hello Rikard,

    It is still in place.

    FYI,
    Greg

    #1325804

    Hi,

    I changed the header meta z-index to 2, and that worked. Please review your site.

    #header_meta {
        z-index: 2 !important;
    }

    Best regards,
    Rikard

    #1325951

    Hello Rikard,

    Thank you – I see the secondary menu links now working.

    I just checked what is developed so far on mobile. “sigh”

    Any thoughts on the right direction for adapting things so it looks professional on mobile/phone?

    Sincerely,
    Greg

    #1325993

    Hi,

    Thanks for the update. Do you have specific design for the mobile layout?

    Best regards,
    Rikard

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.