Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • March 21, 2024 at 7:05 pm #1437814
    blaisen

    Hello. I followed the instructions here https://kriesi.at/documentation/enfold/header/#toggle-id-4-closed and created a header widget to display a button in the header. Unfortunately you only give instructions/code for logo left | navigation center | widget right. I would like to have the widget next to the navigation on the right side of the header: logo left | widget then navigation right: https://ibb.co/s90t7v4

    Can you please help by sending CSS or a fix to the code on functions.php? Currently:

    add_action( ‘ava_after_main_menu’, ‘enfold_customization_header_widget_area’ );
    function enfold_customization_header_widget_area() {
    dynamic_sidebar( ‘header’ );
    }

    March 22, 2024 at 10:16 am #1437990
    Rikard

    Hey Blaise,

    It looks like we are getting blocked by your site:

    Sorry 83.233.188.233, your request cannot be processed.
    For security reasons, it was blocked and logged.

    NinjaFirewall

    If you believe this was an error please contact the
    webmaster and enclose the following incident ID:

    [ #8498090 ]

    Could you disable the firewall for now please?

    Best regards,
    Rikard

    March 24, 2024 at 1:22 am #1438102
    blaisen

    One other thing. I was testing this header design in portrait mode and noticed that the button I’ve created is displaying in an intrusive way. Is there also a way to control the smaller screen sizes placement and button size?

    March 25, 2024 at 8:07 am #1438224
    Ismael

    Hi,

    Thank you for the update.

    You can adjust the order property to reverse the location of the button widget and burger menu. Then, set the left margin of the widget to auto to keep it close to the burger menu icon.

    .responsive #top #header #header_main .inner-container .widget {
    order: 2;
    flex-basis: auto;
    padding: unset;
    clear: none!important;
    align-self: center;
    align-items: flex-end;
    z-index: 1;
    margin-left: auto;
}

.responsive #top #header #header_main .inner-container .main_menu {
    order: 3;
    flex-basis: auto;
    align-items: center;
    align-self: center;
}

    This should also fix the layout of the header on smaller screens.

    Best regards,
    Ismael

    March 25, 2024 at 6:40 pm #1438294
    blaisen

    This code seems logical however it did not change the order, instead it just pushed the burger menu to the left next to the logo: https://ibb.co/NC1QmdZ

    As for responsive mode, I’m concerned about the size of the button – which is not downsizing in its space: https://ibb.co/CMhNyNh

    March 26, 2024 at 7:36 am #1438325
    Ismael

    Hi,

    Thank you for the screenshot.

    We may need to review the css modifications. Please provide the admin URL and login details in the private field.

    Best regards,
    Ismael

    March 26, 2024 at 9:05 pm #1438371
    blaisen

    Hi Ismael. Through some examination and testing, I figured out that I had some competing code in the CSS and that kept your fix from working properly. Once I fixed that, your code above did exactly what I needed. Thanks again for your solution!

    I still need to figure out how to style the button in responsive to display better, but at least it’s in the correct place!

    • This reply was modified 9 months ago by blaisen.
    March 27, 2024 at 7:42 pm #1438476
    Rikard

    Hi,

    Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.

    Best regards,
    Rikard

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