Center action bar

edited April 2017 in Theme support
Sorry to disturb you guys. We have two quick questions.


1 Is there a way to use the Action Bar on the phone and have the slogan appear as well?
2. Can you use a link in the action bar? For instance if you want your slogan/text to link somewhere?

We tried the following code for number 1

#Header #Action_bar .contact_details {
    position:absolute;
    float:none;
    text-align:center;
    width:100%;
}

#Header #Action_bar .contact_details li  {
    display:inline-block;
}

We tried the following code for number 2

#Action_bar .contact_details {
    font-size:30px !important;
}

#Action_bar .social li a i:before {
    font-size:30px !important;
}

Hope you can help! Thank you so much! :) www.daniabikes.com

Comments

  • edited April 2017
    This worked for me...you can try either one to center it:

    #Action_bar .contact_details { width: 100%; text-align: center !important; }

    or

    #Action_bar .social { display: none; }
    #Action_bar .contact_details { float: none; }
    #Action_bar { text-align: center; }
  • edited April 2017
    Hey TheKingofBranding,

    Thanks a lot that worked! The menu is now centered. Amazing!!

    Do you know if there is a way to fit the text in on the mobile version or maybe prioritize the text over the other stuff? And also do you happen to know if there is a way to use links in the slogan text, like Opening hours and they can click and get redirected or current sale etc? :)
  • edited April 2017
    I figured out the size thing as well :) So just wondering if there is a way to make the action bar on phone show contact details and slogan or maybe only slogan if not possible, and if there is a way to make links in slogan.
  • @DaniaBikes But the css your wrote is correct and it works. Please cleat the browser cache or disable a cache plugin after you save this css.
  • Hello Muffin Support,

    Thank you a lot.

    Is there a way to show the slogan on phones? And is there also a way to hide the action bar on phones only?
  • @DaniaBikes No, we do not have any solution to show slogan on phones. But, to remove action bar from mobile, please use:
    @media only screen and (max-width: 767px) {
        #Action_bar { display: none !important; }
    }
  • Good info, but i can't get it to work. The text in the Slogan under the action bar is still left.  How would I center it? Trying to paste this in CSS portion, but no changes  

    #Action_bar { text-align: center; }
  • smullin00
    Please send a link to your page and tell us what you want to change.
    thanks
  • www.tintking.thewebcg.com 

    on the very top, the text "Great workmanship and 100% customer satisfaction are our #1 goal"  to be centered onpage


  • Try this custom css
    ul.contact_details {
    width:100% !important;
    text-align:center !important;
    }
  • Awesome!  It worked.  Thank you
Sign In or Register to comment.