3 replies · opened Sep 26, 2017
Thanks for creating this great theme! I was wondering if it's possible to style only one of the link items (e.g., Login) within the #primary-menu tag as a button? This would be different from example on page menu-with-button.html, where the button is positioned outside of the list. I would like to keep it within the list so that it automatically flows into the mobile menu on smaller screen sizes. Thanks for the help!
Hello,
This is Definitely Possible but a little bit of customization is required. Simply add the following CSS Code:
#primary-menu ul li.menu-has-button > a {
padding-top: 19px;
padding-bottom: 19px;
}
#primary-menu ul .button { margin: 0; }
@media (min-width: 992px) {
#primary-menu ul .button { top: 10px; }
}and then use the following HTML as an Example:
- [Shortcodes](#)This will definitely work fine. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Hello, thanks for you help with this. Your suggestion is a good start, but there a still a couple problems. It looks good when the page loads. However, if I scroll down and the menu re-size smaller, the button does not stay in line with the rest of the menu items. Also, in the mobile menu, it shows up as a button rather than like the other links. Any suggestions? Thanks!
Hello,
This can be fixed by adding a simple CSS Code.
Unfortunately, this cannot be modified since the Menu Item is already using the Button Class. You can consider showing an Alternate text using the Bootstrap Responsive Utilities classes so that the Button is displayed on Desktops and the Alternate Link is displayed on Mobile Devices.
Use this Template we have created for you: https://www.dropbox.com/s/5f0e33m5ie9tqfw/header-button-responsive.html?dl=1 .
This should definitely work fine. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Have the same question, or something new?
Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.
Reply on the dashboard