Okay
  Public Ticket #3662286
Copying Header Layout on Demo Website
Closed

Comments

  •  1
    futurelight01 started the conversation
    June 7, 2024 at 12:59am

    Hi,

    I would like to copy the header navigation layout on the Salient demo site, where there are buttons both on the left and CTA buttons on the right.


    The Layout settings in the Header Navigation options in Salient seems to only allow me to align the header navigation buttons all on the left, center or right, but not split them and have buttons on both the left and right sides.


    Thank you

    Attached files:  salient-header.JPG

  •  2,895
    Andrew replied
    June 7, 2024 at 5:35am

    Hi there,

    Thank you for reaching out to us.

    From the screenshot you shared, the menu uses the "Menu Left Aligned" option as shown in this screenshot.

    1909142297.png

    As for the buttons on the right, you need to use the pull right menu as shown in our guide https://themenectar.com/docs/salient/pull-right-nav-items/. You can add this by navigating to Appearance > menus > manage locations

    Try this and let us know if you need further assistance with this.

    Thanks,

  •  1
    futurelight01 replied
    June 12, 2024 at 2:05am

    Awesome, thanks so much. This is exactly what I was looking for.

    It worked great, except there is now one page on the website where the pull-right nav menu button formatting breaks (see attached image). The right nav menu buttons seem to display properly on every other page of the website. I'm not sure what it is about that particular page that's causing the button formatting to break. Here's a link to that page: https://eglobalfamily.org/wordpress/donate/

    Do you know what could be causing it to not display properly?

    Thank you

    Attached files:  menu-broken.jpg

  •  1,782
    Judith replied
    June 12, 2024 at 4:26am

    Hi there,

    Thanks for writing to us.

    To adjust, please add this CSS:

    .buttons a {
        width: 85%;
    }

    I hope this proves helpful.

    Please let us know how this goes.

  •  1
    futurelight01 replied
    June 13, 2024 at 10:56pm

    I added the CSS, it definitely looks better, but the text is still a bit off-center. It also looks like there's pixel width blue lines around the buttons as well (see attachment)

    Thank you for your continued support

    Attached files:  buttons.JPG

  •  1,782
    Judith replied
    June 14, 2024 at 5:27am

    Hi there,

    Thanks for writing back.

    To make the changes as requested, you will need to add some custom CSS code. To do this, please follow these steps:

    From your WordPress dashboard, Navigate to Salient > General Settings > CSS/Script Related. In the custom code area, insert the provided CSS snippet:

    #header-outer:not([data-format=centered-menu-under-logo]):not([data-format=centered-menu-bottom-bar]) #top .slide-out-widget-area-toggle[data-custom-color=true] a:before, #header-outer:not([data-format=centered-menu-under-logo]):not([data-format=centered-menu-bottom-bar]) #top nav>ul>li[class*=button_]>a:before {
    top: 39%;
}
.buttons a {
    border: 0px solid #369ff4;
}

    Once the code is added, save and refresh the page to see if the change has been applied. In case it helps, please check this section from the documentation on CSS/Script Related. 

    If this does not work as expected or If you have any further questions or need additional assistance, don't hesitate to write back, I'm happy to help. 

  •  1
    futurelight01 replied
    June 20, 2024 at 1:26am

    I managed to figure out what the problem was-- there was some old CSS code on that particular page that didn't appear anywhere else on the website... I'm guessing it was left there by an old plugin that the site no longer uses. After deleting the code, the buttons on that page returned to normal.

    Thank you so much for the help!

  •  2,895
    Andrew replied
    June 20, 2024 at 5:55am

    Hi again,

    Thank you for getting back to us.

    I'm happy you were able to figure this out!smile.png If you've enjoyed Salient, be sure to check out Nectarblocks, our latest innovation for building websites visually with WordPress.

    Your feedback is valuable to us and greatly appreciated!

    Regards,