-
I am trying to achieve this alignment on our header, but I am having trouble. Can someone point me in the right direction, please
Desired Header Layout – https://ibb.co/mrcD7nRq
Current Header Layout – https://ibb.co/TSHRxt5 -
I am almost there. To achieve this, I removed the top bar and secondary navigation. Then I added the 3 images and the secondary menu to the header widget area, and then used this code to align them:
/*header widget settings */ .header-widget .widget { display: inline-block; vertical-align: middle; margin-left: 10px; margin-top: 5px; }The only issue I have now is that the alignment isn’t quite right when viewed on a tablet (768-1024), the alignment needs to be centralised to the secondary menu is central below the images. Also, between 1025 – 1192, the main navigation bar doesn’t display correctly
-
Hi there,
the alignment needs to be centralised to the secondary menu is central below the images.
Sorry, what do you mean? Can I see a screenshot of the desired layout for the tablet?
-
Hi Ying, I’m sorry that I wasn’t clear.
At breakpoint 1163, the account button and search bar in the header wrap underneath the 3 buttons, but I can not get the account button and search bar to centre underneath them
How it looks – https://ibb.co/dsKTcgLt
How I want it to look – https://ibb.co/xtmYK5Tq -
Ah, I see, however, it’s not possible to align the search bar with the images based on the current structure, you will need to add the 3 images to the same widget, you can wrap the images with a container block, and set its
displaytoflexto make them in a row.Once that’s done, we can take a another look to align the search bar and the images.
- You must be logged in to reply to this topic.