We’re with you. JoomShaper is offering a 20% Discount on all plans due to the impact of COVID-19.

Support Online : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

How to align to bottom or baseline all the contents in the Header container of Hellix II

Featured Lock Resolved
Please help me align to baseline or bottom all content or custom positions created in the Header of Helix II framework (through its Layout builder). I have already set the xml and template files but the default alignment of these elements, contents and positions seems to be set to top.

Admittedly, I am not good with CSS so please help me what and where to put the styling so that all the elements will align to the baseline or bottom based on the logo position. Please see the attached image.

In the default layout, the Header contains the Logo, Menu and Search positions. Even in that default setup, when the height of size of the logo gets bigger, the other elements/contents of the Header container gets aligned to top which does not look good.

Please help me where and what to style. Thanks in advance.

Attachments (1)

  • align_to_bottom.png
    align_to_bottom.png 22 KB

11 Answers

Rifat Wahid Alif

More than a month ago #Permalink
Hi Vins,
Please share your site url.

Vins

More than a month ago #Permalink
The site is at pinoymovers.com but the helix framework is still on localhost (xampp on my pc).

In the unmodified, default Helix II template, how do you align to bottom or baseline the Logo, Menu and Search positions found in the Header wrapper? I see they all align to top.

Could you suggest any edits and to what particulars files please? Thank you.

Sohan - Staff

More than a month ago #Permalink
Will you please make me more clear!!

Rifat Wahid Alif

More than a month ago #Permalink
Hi Vins,
Do you wanna set your 'Logo, Menu and Search' in the bottom position ?

Vins

More than a month ago #Permalink
No, I don't want to put them to the Bottom position.

I want all the Logo, Menu and Search position/contents to be aligned to their baseline or bottom in the Header container. In the attached image, I draw a black line where the alignment of all the contents should be. In other words, their baseline or bottom parts should be aligned. I hope I have made it clearer now. Thank you.

Currently, I have made it look like what I want by adjusting the padding of the elements in the custom.css that I created. But it will be best if we can have the elements or contents aligned to baseline or bottom by default.

Rifat Wahid Alif

More than a month ago #Permalink
Hi Vins,
I got you now. you have to fix it from css. so, we can give you batter solution if you will share your URL.

- Thanks

Vins

More than a month ago #Permalink
The test site is live at http://pinoymovers.tk

I have adjusted the logo size to fit the height of the rotating banners so you can't see immediately the alignment. However, you can still see that the log-in buttons are aligned-top. It is the default alignment.

In the default Helix II template, I want the logo, menu and search positions/elements to vertically aligned to the baseline or the bottom of each elements. Thanks.

Rifat Wahid Alif

More than a month ago #Permalink
Hi Vins,
You can align it in 2 ways by replacing css code:

> one way is using padding-top like:
#btl .btl-panel {
overflow: hidden;
padding-top: 29px;
}

> another way is:

#btl {
position: relative;
min-height: 59px;
}

#btl .btl-panel {
overflow: hidden;
position: absolute;
bottom: 0;
right: 0;
}

its for log button hope it will be solved :)

Vins

More than a month ago #Permalink
I am particularly asking for the css fix to the DEFAULT unmodified installation of the Helix II template where I want the bottom of the logo, menu and search positions/elements in the header container should align to the baseline or bottom.

Like I said, I have already adjusted the height of the logo and the banners. What about the default vertical-alignment? Thanks for the current css fix.

Rifat Wahid Alif

More than a month ago #Permalink
Hi Vins,
You know i have solved it initially, you can fix it by css. this feature isn't included with our framework.

Vins

More than a month ago #Permalink
Rifat Wahid Alif wrote:

Hi Vins,
You know i have solved it initially, you can fix it by css. this feature isn't included with our framework.


Okay. I wish you can have this built-in feature in the framework where the end-user can select the alignment of the elements in each container. Thank you.


There are no replies made for this post yet.
Be one of the first to reply to this post!

126

Templates

334149

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us