Tagged: 

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • November 28, 2020 at 11:39 pm #1263710
    Nik

    Hello,

    Please advise how to create a customize header as shown on the attached image in private content.

    Thank you,

    Nik

    November 28, 2020 at 11:40 pm #1263711
    Nik

    Sorry, forgot to mention that i am using enfold shop theme.

    December 1, 2020 at 5:29 am #1264121
    Nik

    Hello,

    Can someone respond?

    Thank you,

    Nik

    December 2, 2020 at 12:16 pm #1264471
    Ismael

    Hi,

    Sorry for the delay. There are a lot of header layouts available in the documentation including a modification where the logo is placed in the center and the main menu is set to the left. The only thing that is missing is the custom menu to the right of the logo, but you should be able to add those using widgets.

    Please check the following links for more info about the modifications.

    // https://kriesi.at/documentation/enfold/example-of-the-menu-left-logo-center-overflow-widget-right/
    // https://kriesi.at/documentation/enfold/header/#header-widget-position

    To add widgets to the header, please check this documentation.

    // https://kriesi.at/documentation/enfold/header/#adding-a-header-widget-area
    // https://kriesi.at/documentation/enfold/example-of-widget-left-logo-center-widget-right-menu-below/

    Best regards,
    Ismael

    December 4, 2020 at 9:34 am #1264957
    Nik

    Thanks, ismael. Will check your links out.

    Nik

    December 6, 2020 at 8:17 am #1265259
    Nik

    Hi Ismael,

    I tested the coding for this header layout:

    Example of the menu left, logo center (overflow), widget right

    It worked on the desktop and tablet view, but not on mobile view. See attached images in private content.

    QUESTIONS:

    1) How do I align the logo with the left and right side?

    2) How to resolve the header for mobile view? The layer slider is blocked by the header. There is also a big white space between the right side and the enfold logo. The sticker header is not ignored on smartphone.

    Thank you very much for your help.

    Nik

    December 8, 2020 at 12:19 pm #1265731
    Ismael

    Hi,

    Thank you for the update.

    Where can we see the site? Please post the site or page URL in the private field so that we could check the layout.

    Are you familiar with css media queries? You should be able to adjust the default style on mobile view using css media queries.

    // https://www.w3schools.com/css/css_rwd_mediaqueries.asp

    Best regards,
    Ismael

    December 10, 2020 at 8:43 am #1266221
    Nik

    Hi Ismael,
    The test website link is in private content. What CSS code is needed to reduce the header white space and also stop the sticky header from scrolling on mobile view?

    Thanks,

    Nik

    December 13, 2020 at 12:22 am #1266815
    Ismael

    Hi,

    Thank you for the link.

    The following css code should prevent the header from sticking on scroll on mobile view and remove the unwanted space inside the header container. 

    @media only screen and (max-width: 767px) {
    .html_header_sticky.html_mobile_menu_tablet #top #wrap_all #header, .html_header_sticky.html_header_transparency #top #wrap_all #header, .html_header_sticky #top #wrap_all #header {
	position: relative;
    }

    #menu-item-shop .cart_dropdown_link {
	height: 30px !important;
	line-height: 30px !important;
    }
}

    Best regards,
    Ismael

    December 15, 2020 at 6:43 am #1267376
    Nik

    Hi Ismael,

    Thank you very much for the CSS coding. It works like a charm!

    The search icon with the dropdown search bar is missing on desktop and tablet views. I added the search widget to the header widget on the right side of the main menu. It took up a big space on the main menu.

    On mobile view the search icon appears fine with the dropdown menu. How do I get the search icon to appear the same as on mobile view.

    Any help is much appreciated.

    Nik

    December 16, 2020 at 1:26 pm #1267816
    Ismael

    Hi,

    You are welcome. Happy to help. The search icon is not displaying because of the following css code.

    #top #header .av-main-nav > li.menu-item {
	display: none !important;
}

    You have to add the following css code below the other to display the search icon back.

    #top #header .av-main-nav > li#menu-item-search {
	display: block !important;
}

    Best regards,
    Ismael

    December 17, 2020 at 10:44 am #1268065
    Nik

    Hi Ismael,

    Thanks so much for the coding. It worked. Issues resolved. You can close this thread.

    Cheers,

    Nik

    December 17, 2020 at 9:42 pm #1268212
    Victoria

    Hi Nik,

    Glad we could help :)

    We are closing the thread.

    If you need further assistance please let us know in a new one.
    Best regards,
    Victoria

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘Custom Header’ is closed to new replies.