Docs

[Jesse E]

Hello –

I am currently building out http://beta.lovethyneighborhood.org/ to be our new website. I would like to make “APPLY NOW” a button in the top righthand corner of the navbar that perfectly replicates the style of the buttons I am using in the body.

I am using this shortcode for those buttons: [button type=”flat” shape=”rounded” size=”large” href=”http://lovethyneighborhood.org/apply/” title=”APPLY NOW”]APPLY NOW[/button]

How can I achieve this?

I love the X theme and recommend it to everyone. So many websites now have a Call to Action button in the top righthand corner of the navbar that it’s becoming an industry standard. If there is room for suggestions, I would love to see the option of buttons in the navbar become a more user-friendly process that don’t require adjustments to the CSS. I appreciate any help you can offer. Thank you!

[Rupok]

Hi there,

Thanks for writing in! Do you want the button in Navbar? You can add it as a menu item and style as a button.

You can follow these threads – https://community.theme.co/forums/topic/button-in-the-navbar/ and https://community.theme.co/forums/topic/add-button-to-header-2/

If you face any issue, let us know. We’ll assist you to get it done.

Cheers!

[Jesse E]

Thank you for your response. Perhaps I am misunderstanding? Nothing is happening with I add to the CSS. See attached image.

[Rupok]

Hi there,

I think you are not using the right code. Here goes the code to make the menu item “Apply Now” as button :

.x-navbar .x-container {
  position: static;
}
#menu-item-320 {
  position: absolute;
  right: 30px;
  top: 25px;
}
#menu-item-320 > a, #menu-item-320 > a:hover {
  background-color: rgba(194, 28, 28, 0.75);
  border-radius: 5px;
  box-shadow: none;
  color: #fff;
  height: 40px;
  line-height: 40px;
  padding: 0 15px;
}

The result should be like this – http://prntscr.com/d3trr6

Cheers!

[Jesse E]

Step in the right direction! Thanks! When the screen gets smaller, the navbar ends up overlapping the APPLY NOW button. They lay on top of one another. How can I avoid this? See attached image.

[Jesse E]

Or, is there a way to make APPLY NOW part of the responsive menu? Right now, it appears we have removed it from the responsive menu and set it over by itself to the side. I’d rather it be located in the menu where it was before only with the added graphic of being a button.

[Rupok]

Hi there,

Let’s add this CSS as well :

.x-nav-wrap.desktop {
  padding-right: 150px;
}

Hope this helps.

[Jesse E]

This is a version of what I am looking for but not quite. I am wanting the original menu position. I only wanted the last link on the right in the primary menu to be a button. I wasn’t wanting to remove it from its position in the menu. Is there a way to move it back to its original position in the menu and simply turn it into a button? Thanks for your help on this!

[Rupok]

Hi there,

In that case, update the last code to following :

@media only screen and (min-width: 980px) and (max-width: 1500px) {
.x-nav-wrap.desktop {
  padding-right: 150px;
}
}

Cheers!

[Jesse E]

That is still not what I am looking for. I have attached a mockup to give more clarity. I apologize if I have been unclear. Thank you for your help and patience.

[Jade]

HI Jesse,

Thanks for clarifying.

Please find this code:

#menu-item-320 {
    position: absolute;
    right: 30px;
    top: 25px;
}

and update it to:

#menu-item-320 {
    top: 25px;
}

Hope this helps.

[Jesse E]

Perfect! Thank you! You nailed it!

[Thai]

If you need anything else please let us know.

[Author]

Posts