Hi I am trying to center this, but when I do it then goes onto to lines and I can’t figure out how to fix that.
https://www.oneworldsilver.com/
I would like to have the phone numbers centered, but also in line with the other search and cart. Thanks
Hello @shellbell , I was able to center your toolbar social playing around in the browser. Here is my. CSS code:
.toolbar {
text-transform: uppercase;
font-size: 1em;
line-height: 36px;
position: relative; //Add position relative to the parent
padding: 0.5em 0;
}
.toolbar-social, .toolbar-cart {
/* float: right; */
/* margin-left: 2em; */
line-height: 38px;
/* position: absolute; */
}
.toolbar-cart {
float: right;
margin-left: 2rem;
}
.toolbar-social {
position: absolute;
top: 50px;
left: 50%;
transform: translate(-50%, 0);
}
Here is a screenshot of the final results.
Hope that fixes it for you.
Nico
Yes but I want them to all be aligned, cause I could do that, but when I tried to align them, the phone numbers either are down here, or then 1/2 bounce to another line and it looks weird.
Hi @shellbell ,
This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/styles.scss->paste below code at the bottom of the file:
@media screen and (min-width: 1280px) {
.toolbar-social {
margin: 0 !important;
width: calc(100% - 500px);
}
.toolbar-cart {
width: 230px;
text-align: right;
}
}
I hope it would help you
Best regards,
Kate | PageFly
I see. The issue is with the search input bar; it offsets your phone number component to the right. I was able to get there however by reordering the DOM tree and fixing a fixed width to your input element. Here is my code:
//Set display to flex, and justify-content to space between
.toolbar {
text-transform: uppercase;
font-size: 1em;
line-height: 36px;
padding: 0.5em 0;
display: flex; //added
justify-content: space-between; //added
}
//Fixed the width of the input element
.search-form input {
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
border: 1px solid transparent;
background: transparent;
margin-top: -1px;
padding: 1px 10px 0 20px;
width: 60px; //edited width
height: 38px;
font: inherit;
font-size: 18px;
line-height: 38px;
color: inherit;
text-transform: none;
-webkit-transition: all .4s;
-ms-transition: all .4s;
-moz-transition: all .4s;
-o-transition: all .4s;
transition: all .4s;
-webkit-border-radius: 60px;
-ms-border-radius: 60px;
-moz-border-radius: 60px;
-o-border-radius: 60px;
border-radius: 60px;
}
//Javscript code to reorder your DOM tree (inserting toolbar-social ahead or toolbar-cart in tree)
var node = document.querySelector(".toolbar-social");
var parent = node.parentNode;
var prev = node.previousElementSibling;
parent.removeChild(node);
parent.insertBefore(node, prev);
Also, you could either try to make the phone component smaller by removing texts (perhaps “WhatsApp” and “Line” are not needed here because of the logos) or set an even lower fixed width (e.g.: 50px) to the input component.
If you need help implementing this, you can contact me.
Best,
Nico
Hi Nico,
I have reordered them myself in liquid without using javascript. Then used the code you provided. Mostly works, except when it starts going smaller it looks like this:
Hello, I’m glad you were able to implement it. Yes, it is not responsive as is. It is most likely overflowing when resizing to a smaller screen. I’d suggest shortening the text or implementing a new layout for your navigation bar to ensure responsiveness. I can help if you are struggling.
Best,
Nico
Yeah I can’t shorten the text, the client wants the whatsapp in there, even though I said everyknow knows the logo. Ok I will have a think of some solution. Thank you.
No problem, happy to help! Oh, gotcha. In that case, if I were in your shoes, I would lower the font size, do a position absolute on the parent div for tablets, and then hide it or put it in the footer for mobiles. Remember to like or accept a solution if you found this helpful to help the community.