Custom Header on Helix Ultimate template Topic is solved

[Matt Bourne]

Hi

1. I need to do some custom header for my Helix Ultimate template here, where I just put 3 columns on the top bar, with additional custom icon table on the far right.

2. I need the elements in the top bar to be centered on the mobile views, and the hamburger menu to be placed inside the header on the mobile view as well, not below it



The hamburger icon were misplaced under the header row, how can i push it back up?


3. On the PC screen, i need the top bar icon on the right to be placed exactly on the far right edge, please see my screeenshot enclosed.


Do i need to adjust the alignment anywhere via setting or CSS tricks? The website link is at the bottom

Please help, I thank you for that..

[Pavel-ww]

Hi.

During website development or code editing, never enable compression and caching. Disable these settings in Helix. And completely clear the Joomla cache and your browser cache.
Only after that, you can proceed with the fixes.

--

On the PC screen, i need the top bar icon on the right to be placed exactly on the far right edge

Here is

Code: Select all

#sp-top3 {
	display: flex;
	justify-content: end;
}

-

The hamburger icon were misplaced under the header row, how can i push it back up?

Currently, your columns have 100% width on mobile devices.

1.jpg

--
You should configure it as follows:

2.jpg

--
While in the Layout Builder settings, use the column grid settings for different devices. Read Helix documentation about Layout Builder.

-

I need the elements in the top bar to be centered on the mobile views

Here is

Code: Select all

@media (max-width: 991.98px) {
    #sp-top-bar .row > div {
        display: flex;
        justify-content: center !important;
    }
}

[Matt Bourne]

Hi.

During website development or code editing, never enable compression and caching. Disable these settings in Helix. And completely clear the Joomla cache and your browser cache.
Only after that, you can proceed with the fixes.

--

On the PC screen, i need the top bar icon on the right to be placed exactly on the far right edge

Here is

Code: Select all

#sp-top3 {
	display: flex;
	justify-content: end;
}

-

The hamburger icon were misplaced under the header row, how can i push it back up?

Currently, your columns have 100% width on mobile devices.
1.jpg
--
You should configure it as follows:
2.jpg
--
While in the Layout Builder settings, use the column grid settings for different devices. Read Helix documentation about Layout Builder.

-

I need the elements in the top bar to be centered on the mobile views

Here is

Code: Select all

@media (max-width: 991.98px) {
    #sp-top-bar .row > div {
        display: flex;
        justify-content: center !important;
    }
}

Sir Pavel,

I can't thank you enough for your enormous help here to solve my problem
However, I still stuck at the last part where the hamburger menu still can't be pushed up to be on the header row
I did as your advise (from my little understanding here) as below



My setting have them moved somewhere else but not at the right place as intended so far now



Did I missed something here? Please advise

Thank you so much for your great help..

[Pavel-ww]

Did I missed something here? Please advise

Hi.

You should configure both columns.

Logo column grid settings

11.jpg

--

Menu column grid settings

22.jpg

--

In total, these values should equal 12 in each breakpoint, as the template is built on Bootstrap, which has a 12-column grid.

3.jpg

--

Learn Bootstrap 5 grid to understand how this works

[Matt Bourne]

Did I missed something here? Please advise

Hi.

You should configure both columns.

Logo column grid settings
11.jpg
--

Menu column grid settings
22.jpg
--

In total, these values should equal 12 in each breakpoint, as the template is built on Bootstrap, which has a 12-column grid.
3.jpg
--

Learn Bootstrap 5 grid to understand how this works

PERFECT!
Sir, you're a legend