"Button Style Menu Item" doesnt look like "Button" in top menu

[gehrkensit]

Hi,

is it possible to stlye  a “Button Style Menu Item” in a top menu more like a button? Currently with the default “Atelier” demo import (the style from the themeforest demo page) a top menu item like e.g “Sign up” set up as  “Button Style Menu Item” (.sf-menu-item-btn) does only get a background color fill for the full height of the top bar, that does like the standard button from http://swiftideas.com/elements/buttons-social-icons/ but it fills the whole menu bars height and so its looking strange.

Is it possible to make its look clearly more like a button? (with some white space around it)…

Is it possible to make it optionally look like a bordered buttonwith custom CSS?

thanks a lot!

[gehrkensit]

http://swiftideas.com/lab-demo/ “Newsletter” button looks to have a padding.

[Kyle – SUPPORT]

Hi

If you provide your link I’ll see what I can do

– Kyle

[gehrkensit]

ok, but site not yet online.

Well, I somehow just need to get my top menu item flagged as “sf-menu-item-btn” in menu builder to style more like http://themeforest.net/item/atelier-creative-multipurpose-ecommerce-theme/full_screen_preview/11118909:

a.sf-button.bordered.accent {
  color: #eabe12;
  border-color: #eabe12;
}
.sf-button.accent {
  color: #ffffff;
  background-color: #eabe12;
  border-color: #eabe12;
}
a.sf-button, a.sf-button:hover, #footer a.sf-button:hover {
  background-image: none;
  color: #fff;
}
swiftideas.com/media="all"
a.sf-button {
  display: inline-block;
  font-size: 12px;
  line-height: 20px;
  height: auto;
  padding: 14px 26px;
  margin: 0 10px 20px 0;
  font-weight: bold;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  transition: all .3s ease-out;
  border: 0;
  position: relative;
  overflow: hidden;
  outline: 0;
  text-shadow: none;
  text-decoration: none;
  vertical-align: middle;
  letter-spacing: 1px;
  max-width: 100%;
}
.accent {
  color: #eabe12;
}

[gehrkensit]

Sorry, please close.

[Kyle – SUPPORT]

Ok no problem

[bryandonwhite]

What’s the workaround on this? Looking to do the same – add a button (that’s styled like our other buttons, not like the “button style menu item”) to the main nav.

Thanks!

[David Martin – Support]

Hi @bryandonwhite,

You can add the class sf-button.bordered to your desired menu link item.

Any issues, please add a link and WP login.

Thanks,
David.

[bryandonwhite]

Where specifically do I add this class?

Thanks!

[David Martin – Support]

Hi @bryandonwhite,

To your menu items, Appearance => Menus. Click the menu item dropdown arrow, add to the option field: CSS Classes (optional).

If you do not see that field: Top Right oF Screen: Screen Options => CSS Classes.

Thanks,
David.

[bryandonwhite]

The UI seems to strip the dot from sf-button.bordered when saving, so I end up with a class of sf-buttonbordered -?

Thanks again

[David Martin – Support]

Hey,

Could you privately add your WP login details and URL? Better do this in a new thread to keep it private also.

Thanks.