- This topic has 16 replies, 4 voices, and was last updated 5 years, 11 months ago by David.
-
AuthorPosts
-
May 15, 2018 at 11:57 am #576385Sumit
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.
May 15, 2018 at 1:15 pm #576437LeoStaffCustomer 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.
May 15, 2018 at 1:57 pm #576490Sumitit 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 #576520DavidStaffCustomer 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; } }
May 15, 2018 at 7:40 pm #576659Sumitits 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 #576697TomLead 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
May 16, 2018 at 5:45 am #576964Sumitthanks, 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 #576969DavidStaffCustomer SupportHi Sumit,
you can add these properties to the CSS:
padding-left: 15px; padding-right: 15px;
Adjust the PX accordingly
May 16, 2018 at 8:25 am #577177SumitThanks, we can’t add css for hover effect?
May 16, 2018 at 8:36 am #577194DavidStaffCustomer 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. }
May 16, 2018 at 9:24 am #577244SumitThanks 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 #577249DavidStaffCustomer SupportHi Sumit, just remove the
@media (min-width:769px) {
and the last}
from the CSSMay 16, 2018 at 9:32 am #577251Sumitlooks kinda weird on mobile view.
May 16, 2018 at 9:45 am #577266DavidStaffCustomer 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; } }
-
AuthorPosts
- You must be logged in to reply to this topic.