Issue with the Menu /Menu goes below the Header section

[Hans (Support Admin)]

Hello Lech,

Yes if you add line breaks you cannot tweak that for mobile devices.

I would suggest removing them and using media queries to adjust for mobile devices.

[lech]

Hi Hans,

#1. that’s the point. Can you please advise how this should be configured in order to be properly displayed? I would expect proper display on mobile and PC as well. Which parameter should be tweaked and in which media section?

#2. Also, I have not your response on below:

Also, when I am viewing the subpages on mobile devices the picture is not scaling well, it does not look like centered, and left side (not too much) is hidden

Thanks again,
L.

[Hans (Support Admin)]

Hi Lech,

#1 – You could reduce the size of the logo image on mobile devices. Try this,

.navbar-brand > img {
max-width: 100px;
}

You can add this in the media query for iPhones and smart phones.

There is not much else you can do.

#2 – This is just standard padding which all the content on the site has. It leaves a space between the edge of the screen and the text.

See here, https://www.dropbox.com/s/jzqw9js8ohgf3ij/padding.PNG?dl=0

[lech]

Hi Hans I will close the topic here and open a new one, for better clarity

[Hans (Support Admin)]

@lech,

Send me an email using the form on the contact page and I’ll answer that way.

[lech]

HI Hans

I just wanted to come back to the menu issue going below the header section.

It is displaying correctly on mobile devices, but when you play with the size of web browser on PC, the menu in some point going below the header section. On Demo it is working fine. Can you please help me do define something that will keep the menu really in the header section. If it does not fit, shoudl switch to the mobile version. I think this is only a metter of the condition in the config file..

Thanks,
Lech

[Hans (Support Admin)]

Hello Lech,

That is because the break-point for the mobile menu to has not been reached yet.

And you have many menu items so it really depends on that.

This may only effect certain devices like tablets are such.

You will need to tweak the BootStrap break-point’s css which I do not recommend.

I would leave it as it or reduce the number of items you have in your menu if you can.

[lech]

Hi Hans,

I think I do not agree the numer of items is the issue. I was trying to play with that – this happens even still there is a space in the header. If you could open on big screen and play with the width-size.

In my opinion this should not behave like this. This behaves good in demo, but not here.

Thanks

Lech

[Hans (Support Admin)]

Hello Lech,

It does do it on the demo.

See this screenshot https://www.dropbox.com/s/rn0389ruzshgc9t/menu-responsive.PNG?dl=0

This is the bootstrap default styles for responsive websites.

If you want to modify the Bootstrap styles you can use the following CSS styles.

@media (min-width:992px) {
.container{width:100%;}
}

I tried this using Firebug and it allowed more space for the logo and menu to be on the same line.