Header responsive from BIG full screen view to super tiny in mobile view

Support
#1

Hi,

I would like my header to change depending on screensize I would like it to go from big with details to tiny - as below example (not my site but one of our suppliers)

to his tiny on mobile view

Thanks!

#2

Hi @Lottafixelius,

Thanks for reaching out.

What do you mean by depending on screen size? There are only specific sizes where you can re-arrange it and it’s based on HIDE DURING BREAKPOINTS option. Applying it on specific screen size which probably too many is not currently possible, but yes, doable with custom development which we can’t provide in the forum.

It’s only applicable for categories like desktop, laptop, tablet, and mobiles. But specific devices for each category isn’t currently possible. Though, I love to hear what you’re trying to achieve maybe it doesn’t need breakpoints at all but just changing those icons size or height of the bar.

Thanks!

#3

Hi again and thank you for your patiens :slight_smile:

Okay this is what I try to achive

The yellow area - the header and the page name - is taken up almost 50% of the screen on a mobile device - I would like it to be more like 20%

So my questions are:

1.a Where do I change the company name and logo area size? Is there a css code?
1.b Can I change the company and logo area in only to mobile view?
1.c Is there a responsive “button” I’ve missed ticking?

2.a Where do I change the header widht? Is there a css code?
2.b Can I change the header widht only to mobile view?
2.c Is there a responsive “button” I’ve missed ticking?

3.a Where do I change the side titles size? Is there a css code?
3.b Can I change the side title size only in mobile view?
3.c Is there a responsive “button” I’ve missed ticking?

4.a How do I get the menue “burger” on the same level as the company name?

Thanks!

#4

Hi @Lottafixelius,

Please try adding this custom CSS under Theme Options > CSS:

@media (max-width: 767px){
    /* the size of company name */
    a.x-brand.img:before {
        font-size: 18px;
        margin-top: 25px;
    }
    /* align the hamburger button to right */
    a.ubermenu-responsive-toggle {
        float: right;
        margin-top: 12px;
    }
    /* the size of title */
    h1.h-landmark.entry-title {
        font-size: 24px;
    }
}

@media (max-width: 767px){
    a.x-brand.img:before {
        font-size: 16px;
    }
}

For more information about the media query CSS, please take a look at this article:

Hope it helps :slight_smile:

#5

Hi again, I didn’t quite get that to work providing my credentials

This is so interesting, I’ve managed to get some changes with your css code :slight_smile:

I have my own Iphone X as a test and apparently the changes for smallest screen in the editor does not reflect reality completely in all screen less than 480px

This is what it looks like on my Iphone:

This is what it looks like in the editor:

#6

Hi @Lottafixelius,

I checked and making them too small will have issues with readability, and search engine may complain about it too. With that much of content in header, it’s only normal with increase in dimension. Perhaps just hide some of it on mobile?

Thanks!

#7

Hi I think the view for 480px (as on the desktop small screen) is fine - but how do I change the iphone X size?

#8

How do I hide the page title on smaller screens?

Thanks!

#9

Hi @Lottafixelius,

I’m not sure what yu mean by changing iPhone X size, the above CSS should work since it covers most of the mobile devices (767px). Because next to it is 768px (portrait) which is already for iPad, then 1024px (portrait) for iPad Pro.

As for hiding the title, please add this CSS as well

@media ( max-width: 480px ) {
.x-header-landmark {
display: none !important;
}
}

Thanks!

#10

Thanks!

I don’t get the hide title css code to work - I’ve entered it on Global CSS, theme - is that the right place?

@media ( max-width: 480px ) {
.x-header-landmark {
display: none !important;
}
}

:slight_smile:

#11

Hi there,

The code @Rad provided should work if you are trying to have the header title not display on devices with screen width 480px and below.

There might be an issue with the CSS code that you have in the Global CSS such as some CSS syntax error that is stopping the CSS code you are adding to work as expected.

To verify that, please copy all the codes that are in the Global CSS and paste it here.

It should provide some information if there are any CSS error that is causing the issue that you have to fix so that the CSS codes will work.

Hope this helps.

#12

Great thanks! I’ve removed most of the css and now get it to respond! :slight_smile: I’ll leave it there for a bit and get on with other stuff :slight_smile:

Thanks!

#13

You’re welcome! :slight_smile:

#14

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