Css Adjustments To Topmainmenu

I'm trying to manipulate the sytist template to better match my Wordpress site. On my Wordpress menu I have the last menu item with a button so it stands out vs. just another menu item.

I thought I was close to getting it to look the same, but the drop down from the main menu also inherits the CSS and I end up with buttons I the drop downs. Any help would be greatly appreciated.

A link to the site is here: www.thomaskay.me
A link to the sytist install is here: www.thomaskay.me/photography

I have the following code configured in the design CSS area:
#topMainMenu ul.dropdown li:last-child{background-color:#0079ad; -moz-border-radius:25px; -webkit-border-radius:25px; border-radius:25px; display:inline-block; cursor:pointer; color: #ffffff!important; font-family:Montserrat; font-size:15px; padding:16px 10px; text-decoration:none;}
#topMainMenu li:last-child a{color:#FFF!important;}
#topMainMenu li:last-child a:active{color: #FFF!important;}
#topMainMenu li:last-child a:hover{color: #FFF!important;}
#topMainMenu li:last-child a:visited{color: #FFF!important;}

Edited by

I can change it to nth-child(6) but that's really just a temporary fix. If I ever add any other menu items to the photography services drop down, it would inherit the value again.

Edited by

What you can do is in Design -> Menu Links, wrap your contact text in a span ... <span class="contactmenu">Contact</span>

Then in Design -> Edit My Theme -> Additional CSS add this code:

.contactmenu { background-color:#0079ad; border: solid 1px #0079ad; -moz-border-radius:25px; -webkit-border-radius:25px; border-radius:25px; display:inline-block; cursor:pointer; color: #ffffff!important; font-family:Montserrat; font-size:15px; padding:16px 10px; text-decoration:none; }
.contactmenu:hover { background: #FFFFFF; border: solid 1px #0079ad; color: #0079ad !important; }

Edited by

I would add the span class to the name field of the menu item?

Edited by

Yes in the Link text field.

Edited by

Thank you! I didn’t know I could use inline html with the name field.

So the only last thing I need to work on is a minor padding issue at the top of the page and format the drop down menu to match the other part of the site.

Would you have time to assist with those elements for an additional fee?

Edited by

Email me a screenshot of where you are talking about the padding issue.

Edited by

Sent you an email... but I think I got all the header related things fixed with the exception of the dropdown menu. That's just not lining up for some reason with the CSS between wordpress and sytist.

I had to change your sy-main.php to move the toolbar within the content container and put it before the header. Once I did that, the blue bar now looks exactly the same as the main site.

Edited by