Alignment of header elements

Support
#1

Dear support team,

I would like everything in my website to be aligned in the same way, also on screens that are a bit smaller. Now when I align everything right on one PC screen it looks just great. Than I move to another screen that’s slightly smaller and everything is mixed up… I’m planning to make another layout for smaller screens such as tablets and mobile. But for the slight differences between similar devices (i.e. different PC screen) I would like to use 1 layout.

I would like everything to be aligned with the width of the webshop content. I’ve added a printscreen to explain this properly. Everything needs to be in between the red lines I’ve drawn.

I’m able to give you my credentials to check out the header I’ve made. Unfortunately the webshop layout is not like the picture I’ve sent you. This is made in my local host and I can’t yet upload this to the real website, since it’s needs some tweaking. I did upload the new header to the real website and made a testpage for it. So I will send you these details in a secure note so you can check it if needed.

Hope you can help me achieve this! :pray:

#2

Hi There,

Please follow these steps:

  1. Remove the left margin of Voordelen container(https://i.imgur.com/AoAPepz.png). After that add this element CSS $el {margin-right: 2em;} to the dropdown navigation element: https://i.imgur.com/yOGHs3n.png

  2. Please change the type of image to Standard: https://i.imgur.com/MMIbX0o.png

Hope it helps :slight_smile:

#3

Hi @thai,

Thank you for your quick reply. I’ve tried the suggested actions but end up with something even worse :wink:

The topbar (brown) is now starting at the left, while it should be more to the right. The CSS element doesn’t seem to do the trick either. The image is now too big and covers a part of the webshop content.

Could you please check what’s wrong here? Thank you so much in advance! :ribbon:

#4

Hi @annevdheijden,

It’s not gonna respond well since it’s an image inserted into a container with fixed height. And it has 31 REM of height, and it’s in within flex layout.

May I know which page is in your first screenshot? Because the test page, it’s perfectly aligned on my end.

Thanks!

#5

Hello there @Rad!

I’ve tried in on my local host copy of the website, where te page from my first screenshot also comes from. It looks like this:

From your reply I do understand that there is some problem with the settings of the image. But besides that, the settings of the top sticky bar (the brown one) is also mixed up. Is that aligned on your end as it should? Maybe I’m doing something wrong in that case, but it just doesn’t look right over here…

I’m working on a 24-inch screen with Google Chrome as browser on a Windows 10 PC.

Thanks for your help again!

#6

Hi @annevdheijden,

I’m on 24" screen too and yes, it’s aligned correctly. But what I’m not seeing is the sidebar in your screenshot. Does that mean you have two copies, one live and one on your local? I may need to check what’s on your local, how about pushing it live but on sub domain? I need to check the exact/identical copy of the site in your localhost.

Thanks!

#7

Hello again!

Mhh… strange that the same settings don’t work for me. You’re right, I was working on a local host and on the live website. I’ve now updated the live website so you can see the same page as I’ve been making the screenshots for.

I’ve not inserted the ‘new’ header yet, since this is still not looking the way it is supposed to and it is a live website. But when you go to the header builder you can click on the header “Nieuwe opzet webshop 2” and than in the preview go to the menu option “HUIDEN”. This is the first option of the 5 categories. After that you’ll see what I’ve been making the screenshots for.

Hope you can work with this and help my find a solution. Thanks in advance :slight_smile:

#8

Hello @annevdheijden

On this test page “testpagina-2”, I’ve assigned another header that I created called “Copy of Nieuwe opzet webshop 2”, where I’ve edited the image settings to be as the following:

So, if you added this snippet to (Theme Options > CSS):

.x-container.width {
    width: 100%;
}

You should get something like this:

Which I believe is something close to what you want.

Thanks.

#9

Hello there,

I’ve been playing around with this header you made. It looks a bit better than my version, but there are still some problems.

This is what it looks like on a 24" screen. The starting point of the first logo in the brown topbar is great. The end of the topbar is a bit to far to the left. It should be slightly more to the right to fit above the image and the content of the website. The picture should be a little more to the left, but I guess that’s because I made it a bit smaller to fit above the shadow line I’ve created. That is something I think I’ll be able to solve.

Then I open it on my 22" screen and I see that everything is different… The starting point of the content seems to be more to the left, but this doesn’t happen for the topbar (brown bar). So everything still changes when I take it to another screensize.

What I would really like is that everything is aligned to match the content with of the webshop. Then when I open it on a smaller screen, this still applies. I think with the guidelines you gave me I’ll be able to make everything fit the way I want it to. But I would still have the problem of the different size screen and the changing alignment.

Is it possible to inform me about a way to make this layout work for all kinds of computer/laptop screens?

Hope it’s clear what I want to achieve. Thanks in advance! :slight_smile:

#10

Hi Anne,

I was able to fix your header on the desktop view

https://screenshotscdn.firefoxusercontent.com/images/7742f978-6d73-42f7-a5d9-72d7c87b006e.jpg

I did a lot of things there, most importantly is to tidy the Bars, Containers, and Elements side-margins and let the Flexbox do its thing.

I also did this to all your bars, this is to make the Header have the same width calculation/value as the content container. This what makes the header container and content container aligned.

Unfortunately, the way you construct the header is just too much for mobile responsive (or I just don’t understand what you’re trying to do), Either way, please remove all your duplicate elements/container that is for mobile view. And then start over a new Bar that will represent your header on mobile.

And also, please Clear and Deactivate your caching plugins and feature, as on this stage of development it does hindering the development more than helping. You won’t be able to see your changes immediately with a caching plugin enabled. You might not able to see my changes on your end, if so, please clear your browser’s cache.

I advise that you take time first to watch and read the following resources.

Using Flexbox
A Complete Guide to Flexbox

Hope that helps,
Cheers!

#11

Hello @friech,

Thank you so much! The layout now looks just the way I want it to be :smile:
I’ve been watching some of the Flexbox video and it made things more clear for me. Great to share that with me, now I can look up different kind of settings and what it’s ment for.

I do understand that the way I’ve build the header for both mobile and desktop in one might be confusing. Certainly now everything is so aligned for desktop that mobile needs whole other settings. Do you recommend making the mobile header in the same header-template or is it better to start a whole new header-template? I don’t know if it is possible to make 2 templates work on the same page: one template for desktop and another for mobile. Or does it only work when I use one and the same template and make sure parts are invisible for some screen sizes?

I also looked for some tips and tricks for this on the forum but didn’t really find anything. Maybe there’s a video for this as well?

Once again, thank you for all your help and great support here. I hope with this last piece of information I can carry on myself.

Best regards!:clap:

#12

You are most welcome!
We’re glad we were able to help you out.

#13

Hi there :slight_smile:
Could you maybe answer my questions regarding mobile header?
Thanks in advance!

#14

Hi There,

Thanks again for asking!
The design you are using is better to create a separate header for mobile.
Create a mobile header and show it only mobile device same as normal header should hide in mobile device.

Hope this is clear now.

Thanks

#15

Thank you, that’s clear now! I’m working on making it fit for mobile now. :slight_smile:
Great support, thanks for all the help and advice!

#16

You are most welcome. :slight_smile:

#17

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.