Docs

[Brock B]

I’d love to be able to have a button just to the right of my header but I’m not sure how to do that. Any suggestions?
http://www.bravepandacreative.com

[Prasant Rai]

Hello Brock,

Thanks for writing in!

Please check following thread:

https://community.theme.co/forums/topic/add-css-button-to-header/

Thanks.

[Brock B]

Hmmm…I tried everything they said to do in that thread but it didn’t seem to work for me. I copied the code into my custom CSS in Customize and it didn’t add a button to my top bar. Any suggestions?

[Rupok]

Hi there,

Adding only CSS won’t do anything. Can you make sure you have added the code in Topbar COntent? – https://community.theme.co/forums/topic/add-css-button-to-header/#post-1241855

Thanks!

[Brock B]

As you can see in the screenshots, I want my website to have a button on the top right like this “Guy Bauer” site.

When I add that code to the Topbar Content, it simply adds a topbar. I eventually want to have the logo and the menu on top of the video, which I don’t know how to do either. But I would like to know how to add that button to the top right at the moment.

[Joao]

Hi There,

Thanks for clarifying.

Please add a menu item to your menu.

Once you have that done, let us know and we will provide the code that style the link to look like a button.

Yo can remove everything from the topbar if you want.

Thanks

[Brock B]

OK great! I added “Start Your Project” to the menu

Now you’ll need to tell me how to turn that into a button, correct?

[Joao]

Hi Brock,

Please add the following code to Appereance Customizer Custom CSS

#menu-item-167 a {
    color: #fff;
    border-color: #ff7600;
    background-color: #ff7600;
    text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5);
    border-radius: 0.25em;
    padding-top: 12px;
    height: 35px;
    margin-top: 22px;
}
#menu-item-167 a span {
    box-shadow: none;
}
#menu-item-167 a:hover {
    color: #fff;
    border-color: #3f96ce;
    background-color: #3f96ce;
    text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5); 
  box-shadow: none;
}

Hope it helps

Joao

[Author]

Posts