Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • March 31, 2022 at 8:02 pm #1346770
    GWS

    Hi,
    We are recreating a website using Enfold (yay!) and needed to create a custom header widget to accommodate a donation image with link and the current social media icons they would prefer to keep. I followed the instructions for adding a header widget area as outlined in the Enfold documentation: https://kriesi.at/documentation/enfold/header/#toggle-id-2 Unfortunately, the widget area is in the top right instead instead of inline with the logo.
    Could you tell me what we have overlooked? The URLs for the site we are replicating and the new Enfold site have been added to Private Content. Thank you.

    April 1, 2022 at 12:05 pm #1346854
    Rikard

    Hey GWS,

    Please try the following in Quick CSS under Enfold->General Styling:

    #text-26 {
    position: absolute;
    right: 0;
    top: 95px;
}

    Best regards,
    Rikard

    April 1, 2022 at 8:28 pm #1346933
    GWS

    Thanks, Rickard! You are the best.

    April 2, 2022 at 8:45 am #1346957
    Rikard

    Hi,

    Great, I’m glad that we could help. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    April 2, 2022 at 4:27 pm #1346989
    GWS

    Now that you mention it… what css can I use to to position #text-26 below the logo on mobile?

    April 2, 2022 at 8:08 pm #1347014
    Mike

    Hi,
    The following css will place the #text-26 below and center the logo on mobile (screenshot 1), it will remain centered below the logo on tablet because there is not enough room next to the logo (screenshot 2), then at 991px and above it moves up in-line with the logo (screenshot 3).

    @media only screen and (max-width: 990px) {
#header #header_main {
	display: flex;
	flex-wrap: wrap;
}
#header #header_main #text-26 {
	order: 2;
    position: relative;
    right: unset;
    top: unset;
    margin: auto;
    padding: 0;
}
#header #header_main .av-logo-container {
	order: 1;
}
#header #header_main_alternate {
	order: 3;
}
}
@media only screen and (min-width: 991px) and (max-width: 1210px) {
	.responsive #header_main > .container.av-logo-container {
		max-width: 499px;
		margin: 0;
	}
	.responsive #header_main > #text-26 {
    right: 20px;
	}
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    April 8, 2022 at 11:52 pm #1347758
    GWS

    Thank you for this information. We have added this to the custom css. We were trying to figure out why the links were not working and during editing ended up recreating the widget. The text box is now text-29.. The custom header image links aren’t working. Any idea as to why not? The widget details are in private content.

    April 9, 2022 at 12:15 am #1347760
    Mike

    Hi,
    Please try adding z-index you your #text-29 code like this:

    
#text-29 {
    position: absolute;
    right: 300px;
    top: 0px;
    z-index: 2;
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    April 9, 2022 at 3:58 pm #1347792
    GWS

    That did the trick, thank you. One last question on this topic: how do I set it so the social media icon links in the custom header open in a new window?

    April 9, 2022 at 4:12 pm #1347794
    GWS

    Ugh! When trying to set the social links the icons are no longer showing in the custom header. I don’t understand why. The widget text wasn’t changed. I’m sorry to ask, but can you see what went wrong?

    April 9, 2022 at 4:20 pm #1347795
    GWS
    This reply has been marked as private.
    April 9, 2022 at 5:22 pm #1347799
    Mike

    Hi,
    For the links to open in a new tab you need to add target="_blank" to the links
    2022-04-09_006.jpg
    Please read more here.

    Best regards,
    Mike

    April 13, 2022 at 5:02 pm #1348273
    GWS
    This reply has been marked as private.
    April 13, 2022 at 11:19 pm #1348323
    Mike

    Hi,
    Thanks for your feedback, I understand that you are using a custom header widget, but I don’t recognize the ydf-logo-social using the font awesome icons, I thought you had used html to add them, are you using a plugin shortcode to add them? This is not from the theme.
    If you are using a plugin shortcode try looking in it’s settings for an option to open the links in a new tab, or check the plugin support page for a function that will add this, otherwise please include an admin login so I can see how these are added.

    Best regards,
    Mike

    April 14, 2022 at 3:36 pm #1348408
    GWS

    Mike,
    The problem was using a text widget instead of html. I sorted it out and got the links working. Thank you for your guidance. You can close this ticket.

    April 14, 2022 at 4:54 pm #1348429
    Rikard

    Hi,

    Thanks for the update, I’ll go ahead and close this thread for now then. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

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