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.
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?
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)
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.
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.
I'm happy you were able to figure this out! 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!
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
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.
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,
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
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.
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
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.
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!
Hi again,
Thank you for getting back to us.
I'm happy you were able to figure this out!
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,