Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
mayflyaway

make CTA button on wexley nav item

Question

Site URL: http://www.rachaelrenee.photos

Hi there, I am trying to code a button into my nav bar like the CTA button on some of the templates. I did this on a different template, so I took the code form there and have been trying to figure it out. I basically want it to be an outline button, but I haven't fully edited the code yet, because I can't seem to figure out how to make it apply to the last nav item. the "Book real estate photos" is the one I want to turn into a button.

Help is appreciated! Here is the code ive been working with... with edits I made that dont work...

 

/*contact button*/
#topNav .nav-item:last-child {
    background-color: #EDD59E;
    padding: 10px 10px;
    border-radius: 3px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4)
  }

.nav-item:last-child:hover {
    background-color: white;
    padding: 10px 10px;
    border-radius: 3px;
  }

Share this post


Link to post

6 answers to this question

Recommended Posts

  • 0
4 hours ago, tuanphan said:

div#topNav>nav>ul>li:last-child a {
    background-color: #EDD59E;
    padding: 10px 10px;
    border-radius: 3px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
}

 

This works great - now I've added some styling but cant seem to figure out how to get padding on the left and ride side of the text, and reduce the padding on top and bottom

Share this post


Link to post
  • 0
29 minutes ago, mayflyaway said:

This works great - now I've added some styling but cant seem to figure out how to get padding on the left and ride side of the text, and reduce the padding on top and bottom

    padding-right: 10px !important;
    padding-left: 20px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;


You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post
  • 0
57 minutes ago, mayflyaway said:

so close! Now it is popping it up out of line with the rest of the nav bar. Any ideas? http://www.rachaelrenee.photos/

#topNav ul {
    display: flex;
    align-items: center;
}

 


You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...