Center action bar

DaniaBikes · April 2017

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

TheKingofBranding · 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; }

DaniaBikes · 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?

DaniaBikes · 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.

Bryan · April 2017

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

DaniaBikes · April 2017

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?

Albert · April 2017

@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; }
}

TheWebCG · January 2018

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; }

Bryan · January 2018

smullin00
Please send a link to your page and tell us what you want to change.
thanks

TheWebCG · January 2018

www.tintking.thewebcg.com

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

Bryan · January 2018

Try this custom css

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

TheWebCG · January 2018

Awesome! It worked. Thank you

Center action bar

Comments

This website uses cookies