- This topic has 16 replies, 4 voices, and was last updated 4 years, 1 month ago by
David.
-
AuthorPosts
-
May 15, 2018 at 11:57 am #576385
Sumit
I want to add a button like this in my website’s navigation bar.
I followed this ticket
https://generatepress.com/forums/topic/round-border-around-a-menu-button/
But I am unable to make it on my website.
I am providing the link to my website.
I also want to know where I can get update on my older tickets, I forgot to select “Notify me of follow-up replies via email” now older tickets are no where to be found.
I ended up fixing all previous issues myself, hopefully I receive update on this one.
GeneratePress 2.1.1GP Premium 1.6.2May 15, 2018 at 1:15 pm #576437Leo
StaffCustomer SupportHi there,
Start by following the steps here: https://docs.generatepress.com/article/adding-buttons-navigation/
Then you just need to add this additional style:
border-radius: 5px;
You can see your previous topic here: https://generatepress.com/forums/users/tathspts/
Let me know.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/May 15, 2018 at 1:57 pm #576490Sumit
it looks like this
http://prntscr.com/jic5r5I am using this code in additional CSS under customize.
@media (min-width:769px) {
.main-navigation .main-nav ul li.nav-button a {
background-color: #ffffff;
border: 2px solid #000000;
border-radius: 5px;
color: #000000;
}
}May 15, 2018 at 2:59 pm #576520David
StaffCustomer SupportHi Sumit,
try this CSS:
@media (min-width:769px) { .main-navigation .main-nav ul li.nav-button a { background-color: #ffffff; border: 2px solid #000000; border-radius: 30px; color: #000000; line-height: 35px; } }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/May 15, 2018 at 7:40 pm #576659Sumit
its almost there, just need to align it middle in the header. I changed line-height to 25.
Please check this snapshot http://prntscr.com/jif4wo
also it possible to show similar button on tablet and mobile as well?
May 15, 2018 at 7:43 pm #576660May 15, 2018 at 9:24 pm #576697Tom
Lead DeveloperLead DeveloperHi there,
I’m not seeing the button in your navigation? Did you remove it? You should just be able to add
margin-top: 5px;
to your existing CSS. You may need to adjust the 5px.If you’re using the mobile header, you can add HTML to it like this: https://docs.generatepress.com/article/mobile-header/#adding-html-inside-the-mobile-header
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentMay 16, 2018 at 5:45 am #576964Sumit
thanks, it worked, http://prntscr.com/jilnmk
is possible to make the button little bigger horizontally.
can you also provide css button and text hover state colors?
Thanks
SumitMay 16, 2018 at 5:57 am #576969David
StaffCustomer SupportHi Sumit,
you can add these properties to the CSS:
padding-left: 15px; padding-right: 15px;
Adjust the PX accordingly
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/May 16, 2018 at 8:25 am #577177Sumit
Thanks, we can’t add css for hover effect?
May 16, 2018 at 8:36 am #577194David
StaffCustomer SupportHi Sumit, you just need to add CSS to include the hover pseudo class like so:
.main-navigation .main-nav ul li.nav-button a:hover { styles go here. }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/May 16, 2018 at 9:24 am #577244Sumit
Thanks David, this is perfect.
now if I could do the same for mobile and tablet view as well it would be gold 🙂
Thanks
SumitMay 16, 2018 at 9:29 am #577249David
StaffCustomer SupportHi Sumit, just remove the
@media (min-width:769px) {
and the last}
from the CSSDocumentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/May 16, 2018 at 9:32 am #577251Sumit
looks kinda weird on mobile view.
May 16, 2018 at 9:45 am #577266David
StaffCustomer SupportThen try adding a limit to the width for the mobile:
@media (min-width:320px) { .main-navigation .main-nav ul li.nav-button a { max-width: 180px; } }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.