Action button broken on mobile

allan200012 · March 2016

Hello,

We are having some issues with the action button on all pages of our website: http://boblesser.com.routing.wpmanagedhost.com

The button looks on when viewing at iPad width.

http://boblesser.com.routing.wpmanagedhost.com/wp-content/uploads/2016/03/Screen-Shot-2016-03-07-at-7.19.55-PM.png

Then when you get small for iPhone it breaks the button alignment.

http://boblesser.com.routing.wpmanagedhost.com/wp-content/uploads/2016/03/Screen-Shot-2016-03-07-at-7.19.45-PM.png

How can the button remain on the right side even at the smallest width?

thanks,

Al

Albert · March 2016

Hi,

you can't. This is how Action Button works on mobile what you can also see on our demos. What you can only do is center this button on mobile. If you want to center it, use Center option for Top Bar Icons drop-down field under Theme options > Responsive section.

allan200012 · March 2016

Ok, I tried and it looks really bad.

I also tried to hide it with the "hide icons and action button" which looks good because it's hidden but then it's missing from the navigation menu. Can it be included in the mobile menu once hidden?

allan200012 · March 2016

I guess another solution could be to style the normal nav button with a button outline.

I might have to bypass using the action button. Which style can I use to create a button out of the normal navigation buttons?

thanks,

Albert · March 2016

It's called Stroke style but buttons style can be set only one per whole site. You can not use different styles in different places. So if you want to change button's style, you can do this under Theme options > Global > General section.

allan200012 · March 2016

I would like to use the same style on entire site.

My question was what css class to target in the Navigation > Menu item?

Albert · March 2016

Sorry but we don't get it. As we see, your Action Button which is next to menu items in the right top corner is got this Stroke style already so what else you want to do?

allan200012 · March 2016

We would like to avoid using the action button.

Instead we want to style a normal navigation link with the proper CSS class so it looks like the action button. I've done this on another be theme website before by adding a CSS class to the navigation menu class field.

Please let me know which class you recommend using.

thanks

Albert · March 2016

Ok. So to do something similar with all menu items, you need to use the following css:

#Top_bar .menu > li > a span:not(.description) {
    border: 2px solid #27c2d6 !important;
    border-radius: 3px;
    line-height: 40px;
}

#Top_bar .menu > li > a span:hover:not(.description) {
    background: #27c2d6 none repeat scroll 0 0;
    color: #fff !important;
}

allan200012 · March 2016

Hi,

This code makes all of my navigation items with the button style.

I only want one menu item to have this style. I tried changing the class to #Top_bar1 and inserted it into the menu CSS field but it didn't work.

Can you let me know which class I can use to make it only appear on one menu item?

Do you understand I am trying to replicate the action button without using the action button.

The action button looks really bad on responsive so I will just do it this way to allow for it to be included in the mobile nav too.

Please let me know which css style I can use to only effect one navigation link please.

thanks you!

Albert · March 2016

For the whole time, we thought you want to make all menu items the same style as the action button. If you want only one item to be this style, go to Appearance > Menus section, add class name for this item and after that, let us know which item is it.

allan200012 · March 2016

menu item 115

Once you tell me the name of the class I can put in into the one I need to.

Thank you! sorry for the confusion.

Albert · March 2016

Like we wrote above, you can gave any class name you want for this item. So please give this item class and then let us know so we can have a look on it.

allan200012 · March 2016

I tried changing the class to #Top_bar1 and inserted it into the menu CSS field but it didn't work.

#Top_bar1 .menu > li > a span:not(.description) {
    border: 2px solid #27c2d6 !important;
    border-radius: 3px;
    line-height: 40px;
}

#Top_bar1 .menu > li > a span:hover:not(.description) {
    background: #27c2d6 none repeat scroll 0 0;
    color: #fff !important;
}

Albert · March 2016

Don't you see CSS Classes field as on the http://snag.gy/ViZxf.jpg ? If you don't see such field, you need to click on Screen Options in the right top corner and activate it.

allan200012 · March 2016

Yes, I put the CSS into the Custom CSS field. Done

I also put the Class name into the menu: Top_bar1

You can see it's not working: http://boblesser.com.routing.wpmanagedhost.com

See screenshot:http://boblesser.com.routing.wpmanagedhost.com/wp-content/uploads/2016/03/Screen-Shot-2016-03-14-at-11.16.16-AM.png

Albert · March 2016

So if you added Top_bar1 class for this item, you can use the following css now:

#Top_bar .menu > li.Top_bar1 > a span:not(.description) {
    border: 2px solid #27c2d6 !important;
    border-radius: 3px;
    line-height: 40px;
    margin-top: 10px;
}

#Top_bar .menu > li.Top_bar1 > a span:hover:not(.description) {
    background: #27c2d6 none repeat scroll 0 0;
    color: #fff !important;
}

allan200012 · March 2016

perfection! thanks!

Albert · March 2016

You are welcome!

allan200012 · April 2016

Hello,

I just updated my site with the Envato toolkit and the entire site went white.

THIS IS MY ERROR MESSAGE:

Backing up & removing the old version of the theme…

The update cannot be installed because we will be unable to copy some files. This is usually due to inconsistent file permissions. muffin-options/fields/upload/field_upload.js

Theme update failed.

Albert · April 2016

This message is not related with theme at all. The problem is somewhere else on your end. We suggest to update theme files via FTP as it's the most safety way to update theme files in our opinion.

Action button broken on mobile

Comments