Action button broken on mobile

Hello,

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

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

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

thanks,
Al


Comments

  • 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.
  • 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?


  • 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,
  • 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.
  • I would like to use the same style on entire site.
    My question was what css class to target in the Navigation > Menu item?
  • 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?
  • 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
  • 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;
    }
  • 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!
  • 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.
  • 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.
  • 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.
  • 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;
    }
  • 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.
  • Yes, I put the CSS into the Custom CSS field. Done
  • 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;
    }
  • perfection! thanks!

  • 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.

  • 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.
Sign In or Register to comment.
This website uses cookies

We use cookies to personalise content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services.

Cookies are small text files that can be used by websites to make a user's experience more efficient.

The law states that we can store cookies on your device if they are strictly necessary for the operation of this site. For all other types of cookies we need your permission. This means that cookies which are categorized as necessary, are processed based on GDPR Art. 6 (1) (f). All other cookies, meaning those from the categories preferences and marketing, are processed based on GDPR Art. 6 (1) (a) GDPR.

This site uses different types of cookies. Some cookies are placed by third party services that appear on our pages.

You can at any time change or withdraw your consent from the Cookie Declaration on our website.

Learn more about who we are, how you can contact us and how we process personal data in our Privacy Policy.

Please state your consent ID and date when you contact us regarding your consent.