Size of action bar and footer copy

DaniaBikes · May 2017

Hello Muffin,

Is there a way to adjust the size of the Action Bar and Footer Copy to get thinner than this:

#Action_bar { margin-bottom: 1px; }

#Action_bar { line-height: 30%; }

#Footer_copy { margin-bottom: 1px; }

#Footer_copy { line-height: 30%; }

We would like them even thinner, but we are unsure how/what to write.

Bryan · May 2017

Hi,

Please send a link to this page, we will write custom css for you.

thanks

DaniaBikes · May 2017

Hello!

Thank you so much. We want the footer and action bar as thin as possible. We can move the card information in bottom if needed.

https://www.daniabikes.com

Here you can see what we mean - thin action bar like that!

http://www.forever21.com

Thanks so much

DaniaBikes · May 2017

Is there also a way to make the menu thinner than 30/15 ?

Bryan · May 2017

Please use this css

.header-classic #Action_bar .contact_details li {
	padding:0 !important;
}
#Top_bar .menu > li > a span:not(.description) {
	line-height:40px !important;
}
#Top_bar #logo {
	padding:4px 0px !important;
}
.header-classic #Top_bar .top_bar_right {
    top: -8px !important;
    height:35px !important;
}

#Top_bar.is-sticky #Action_bar .contact_details li {
	padding:0 !important;
}
#Top_bar.is-sticky .menu > li > a span:not(.description) {
	line-height:40px !important;
}
#Top_bar.is-sticky#logo {
	padding:4px 0px !important;
}
#Top_bar.is-sticky .top_bar_right {
    top: 0px !important;
    height:35px !important;
}

DaniaBikes · May 2017

Wow. That is incredible, I cannot believe you wrote all that for us. Seriously, thank you so much that is insane.

Is there any way to center the logo and the search icon/shopping cart? It looks silly when the navigation is centered but not the logo and the icons. I can see they have different CSS names, so just centered the navigation did not work. Stack center also doesn't center the logo icons.

Also can I use the same CSS or a similar CSS for the footer? I tried:

#Footer_copy { margin-bottom: 1px; }

#Footer_copy { line-height: 30%; }

And it works sometimes, but not always.

Bryan · May 2017

No problem.
What do you mean with centering the icons? Please use a screenshot to explain.
Also tell me what do you want to do with the footer.

DaniaBikes · May 2017

Ty so much for always being so helpful. I added a link to show the icon thing http://imgur.com/a/mBVpK. What I mean is, if there is a way to center EVERYTHING in the topbar, not just navigation.

And for the actionbar we want to reduce the size with 50% so it is half as wide. So a thin actionbar. We tried

#Footer_copy { margin-bottom: 1px; }

#Footer_copy { line-height: 30%; }

But it cannot get thinner.

Bryan · May 2017

This is not possible on all items, it has to stay this way, sorry.
Do you mean the footer or the action bar? You said action bar but you insert footer css.
I send you action bar css.

DaniaBikes · May 2017

Hello Muffin,

Sorry for being so unprecise. English is not our first language!

We mean the footer. We want to make the footer smaller as well, so it all matches each other.

About centering it all, if we want to try to learn how to do it by editing theme files where do we have to look at? We understand you cannot give CSS for it, but if we wanted someday to try and learn it, where do we look at? Ty so much!

Bryan · May 2017

Well you need to look in the header.php file, but you will do that on your own responsibillity because we do not support direct file changes.

footer#Footer .widgets_wrapper {
	padding:0px !important;
	margin-bottom:-10px !important;
}
footer#Footer aside {
	line-height:20px !important;
}
footer#Footer aside ul {
	line-height:20px !important;
}
#Footer .footer_copy .one {
    margin-bottom: 0 !important;
    padding-top: 5px !important;
    min-height:0px !important;
}

DaniaBikes · May 2017

Okay thank you a lot. I completely understand that!

Have a fantastic day.

Size of action bar and footer copy

Comments