Tagged: ,

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • December 17, 2023 at 2:29 am #1428312
    biggsuccess

    Hi,
    I have a child theme and followed the instructions here to create a widget area
    Adding a header widget area

    Header

    I’m trying to get this look here:

    Add button elements to your header

    I’ve followed the instructions on that page, however my buttons stack vertically on the right side with a lot of space. The link is below.

    Can you help me troubleshoot where I’ve gone wrong?

    December 17, 2023 at 11:11 am #1428319
    Rikard

    Hey biggsuccess,

    Please send us a temporary WordPress admin login and login URL so that we can have a closer look. You can post the details in the Private Content section of your reply.

    Best regards,
    Rikard

    December 17, 2023 at 5:49 pm #1428335
    biggsuccess

    Thanks Rikard!

    And FYI regarding the CSS from:

    Add custom CSS

    The style.css can also be accessed via FTP. Once you login to FTP go to wp-content/themes/enfold-child/style.css

    *The stylesheet via FTP is where I’ve added the CSS for the header widget

    December 17, 2023 at 6:27 pm #1428336
    Mike

    Hi,
    Thank you for the link to your site, the issue was in your widget there was a “pre” & “code” tag, probably from were you copied the code from.
    Enfold_Support_4161.jpeg
    I removed it for you and now your header buttons are correct
    Enfold_Support_4163.jpeg
    please clear your browser cache and check.

    Best regards,
    Mike

    December 17, 2023 at 7:17 pm #1428337
    Guenni007

    She probably copied the code from the DOM ( as mike said ). Of course, the pre and code tags have been copied as well.
    If you just activate it within the browser and then press copy, the copy succeeds without the wrapper.

    December 17, 2023 at 8:30 pm #1428342
    biggsuccess

    Thank you for finding my issue! One more question – is there a way for me to have that same layout on mobile? It seems the buttons become vertical and stacked rather than horizontal across the top.

    December 17, 2023 at 8:55 pm #1428347
    Mike

    Hi,
    On mobile there is not enough room for the buttons next to the logo, so they will need to be smaller and under the logo.
    Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    @media only screen and (max-width: 430px) { 
	.responsive #top #header #header_main .inner-container .widget {
    order: 3;
    flex-basis: 100%;
	}
	.responsive #top #header #header_main .inner-container .widget .avia-button.avia-size-medium {
	padding: 12px 5px 10px;
    font-size: 12px;
    min-width: 60px;
	}
	.responsive #top #header #header_main .inner-container .widget>div {
		padding: 0;
	}
	.responsive #top #header #header_main .inner-container .widget>div>div {
	text-align: center;
	}
}

    Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    December 17, 2023 at 9:27 pm #1428349
    biggsuccess

    Hi Mike –

    After applying the CSS, the issue improved some, but the 3rd button is stacked under the 2nd one.

    Also, the header area is overlapping the slider right below it, cutting off the top images and words.

    I really appreciate you help with this – what else can I try?

    December 17, 2023 at 9:44 pm #1428350
    Mike

    Hi,
    I added !important; to flex-basis: 100%;
    please clear your browser cache and check again.
    Please see the screenshot in the Private Content area.

    Best regards,
    Mike

    December 17, 2023 at 9:47 pm #1428353
    Mike

    Hi,
    For the slider I added this css:

    @media only screen and (max-width: 430px) { 
.html_header_top.html_header_sticky #top #wrap_all #main {
    padding-top: 182px !important;
}
}

    Best regards,
    Mike

    December 17, 2023 at 9:48 pm #1428355
    biggsuccess

    Thanks Mike – that took care of things getting cut off on the slider below.

    And if this helps – my client is trying to accomplish something like the website like I’ve added in the private area. With the same behavior it does on mobile view where the buttons go below the logo. I can drop this to from 3 buttons in the header to 2 if need be.

    December 17, 2023 at 10:16 pm #1428357
    biggsuccess

    Mike, thank you! As I’ve cleared cache, I see this is working perfectly on mobile and on laptop views. I really appreciate your work on this for me.

    December 17, 2023 at 10:45 pm #1428362
    Mike

    Hi,
    Glad that we could help, unless there is anything else we can help with on this issue, shall we close this thread then?

    Best regards,
    Mike

    December 17, 2023 at 10:47 pm #1428363
    biggsuccess

    Yes Mike and thanks again!

    December 17, 2023 at 11:05 pm #1428365
    Mike

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘Need help with Header widget’ is closed to new replies.