Viewing 25 posts - 1 through 25 (of 25 total)
  • Author
    Posts
  • October 13, 2021 at 12:42 am #1324650
    Donkies11

    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

    October 13, 2021 at 12:44 am #1324651
    Donkies11

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

    October 13, 2021 at 12:09 pm #1324721
    Rikard

    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

    October 13, 2021 at 2:05 pm #1324749
    Guenni007

    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. )

    October 14, 2021 at 4:07 am #1324832
    Rikard

    Hi,

    Thanks for helping out @guenni007 :-)

    Best regards,
    Rikard

    October 14, 2021 at 4:14 am #1324833
    Donkies11

    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?

    October 14, 2021 at 9:55 am #1324883
    Rikard

    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

    October 19, 2021 at 6:52 am #1325514
    Donkies11

    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 years, 2 months ago by Donkies11.
    October 19, 2021 at 4:29 pm #1325584
    Rikard

    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

    October 19, 2021 at 7:28 pm #1325596
    Donkies11

    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

    October 20, 2021 at 6:18 am #1325667
    Rikard

    Hi,

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

    Best regards,
    Rikard

    October 20, 2021 at 6:31 pm #1325769
    Donkies11

    Hello Rikard,

    It is still in place.

    FYI,
    Greg

    October 21, 2021 at 6:53 am #1325804
    Rikard

    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

    October 21, 2021 at 11:03 pm #1325951
    Donkies11

    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

    October 22, 2021 at 6:43 am #1325993
    Rikard

    Hi,

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

    Best regards,
    Rikard

    October 25, 2021 at 4:31 am #1326260
    Donkies11

    Hello Rikard,

    Well – for me the main menu isn’t becoming a “hamburger” menu on my phone.

    Losing the secondary menu and getting the main menu to load correctly will be a good start…

    I think I can work with the remaining elements.

    Sincerely,
    Greg

    October 25, 2021 at 12:32 pm #1326311
    Rikard

    Hi Greg,

    The burger menu is displaying on my end, but the layout doesn’t look very good. Could you provide us with a screenshot highlighting the changes you would like to make on mobile please?

    Best regards,
    Rikard

    November 10, 2021 at 10:07 pm #1328578
    Donkies11

    FYI: still dealing with client changes with desktop (overall) site version. Thank you for keeping this open right now. I will circle back to this when appropriate. greg

    November 11, 2021 at 8:26 am #1328623
    Rikard

    Hi Greg,

    No problem, we’ll keep this thread open for you.

    Best regards,
    Rikard

    December 14, 2021 at 7:19 am #1332716
    Donkies11

    Hello Rikard,

    And now… alas – the time has come to wrangle this ungainly mess so that it works for mobile.
    I’d like to start with the header element: logo, socket (2nd nav), and main nav.

    Is it possible to load a different menu for mobile? Also – all could be white font on a solid blue color – instead of attempting the diagonal “cut” of the blue where the logo is.

    I’m open to other points, ideas, etc.

    Sincerely,
    Greg

    December 16, 2021 at 5:05 am #1333035
    Rikard

    Hi,

    Thanks for the update. Did you move the site you linked to previously in this thread? The site in private is not loading on my end.

    If you want to use a different menu on mobile, then you can set that under Enfold->Main Menu->General->Alternate Menu for Mobile.

    Best regards,
    Rikard

    December 16, 2021 at 6:25 am #1333037
    Donkies11

    Hello Rikard,

    I am going to be jumping in to this project tomorrow morning (pacific time).

    Can we keep this open a few more days?

    ~ Greg

    December 16, 2021 at 10:24 am #1333078
    Rikard

    Hi Greg,

    No problem, just let us know when you are ready.

    Best regards,
    Rikard

    January 3, 2023 at 4:27 am #1377423
    Donkies11

    My apologies Support Team – this ticket may be closed.
    ~ Greg

    January 3, 2023 at 4:28 am #1377424
    Ismael

    Hi,

    Thank you for the update. Please let us know if you have more questions about the theme.

    Happy new year!

    Best regards,
    Ismael

  • Author
    Posts
Viewing 25 posts - 1 through 25 (of 25 total)
  • The topic ‘Header help – design layout?’ is closed to new replies.