Header responsive

sarielg · April 2021

Hi,

I'm having problem making the header look smart across different page widths. There is Tablet view I pad small size - there can be a hamburger menu. And how to get the logo other in center every device? Now I put empty text ”blok” on both sides in Header Builder.

Site url is https://www.elgideas.zoner.dev/sely/

Kind regards Sari

Phil · April 2021

Hello,

Sorry, but I quite do not understand, and I do not want to misunderstand you.

Can you describe to me in more detail what you want to achieve, please?

Thanks

sarielg · April 2021

Hi

I' sorry my english but I trying to explain in screenshots what is the problems in small device like Ipad mini4 and may be Samsung gallaxy tab2 and also Ipad Pro when it is vertical position the menu moves in two row.

-Sari

sarielg · April 2021

I moved the site now the URL address is https://sely-fi.hel7.wp-cloud.dev/

Phil · April 2021

1) The button is cut because your logo is too large. If you upload a smaller logo for a tablet, it will work.

2) The menu goes to the second row because there are too many menu items. To solve it, you should shorten the text in the menu items or decrease the font.

3) Unfortunately, there is no option to make the navigation menu wider for the hamburger menu.

4) Without the text items next to the logo, is it not centered? Can you show me how it looks without them, please?

5) When the tablet is horizontal, it takes its display from the desktop view, and there is no option to change it.

So if you want to change the horizontal tablet display, you need to change the desktop one.

Thanks

sarielg · April 2021

Hi

oh no! is it any way to get subpage/submenu wider the white backround below little bit wider? And how to change submenu row spacing smaller there is subpage name two lines.

And also the submenu is a transparent bacground you can see it if you go to menu "ETUSIVU" when the navigation are in two row. Or navigation comes on top of the submenu.

And there is screenshot about when I remove others empty text bnext to logo - and now the logo is more left not center in IPad vertical screen.

And you did't answer the Sticky menu how to make it the hamburger menu when the Sticky menu appears. Anf if not how to change row spacing smaller and also where to change submenu font size? Now it is too big.

I have to ask how to update LayerSlider Wp becouse now I can't update it.

Phil · April 2021

To achieve these things, you will have to use some CSS code and place it in Betheme -> Theme options -> Custom CSS & JS -> CSS.

In that case, you should contact your web developer because it requires more advanced CSS.

You can update the bundled plugin from Betheme -> install plugins.

If the newest version is not available yet, please wait for it. The plugins you buy with the theme are not premium plugins. If you want instant updates, you have to purchase the plugins separately.

Thanks

sarielg · May 2021

Hi

may I ask again this problem to the site https://sely-fi.hel7.wp-cloud.dev/

Where the navigation menu in tablet and mobile view can be made wider ? Where I can find code?
Submenu font-size is too big desktop view and I can’t find where to change it?
And also where can change font-size and line-height in submenu tablet and mobile view?Submenu font-size is too big desktop view and I can’t find where to change it?

sarielg · May 2021

Here is the screenshot

Kind regards Sari

Phil · May 2021

1,3) To change the width of the navigation menu, line height, and font size, please, use the following code:

.mhb .first-row .tabletMobile ul.menu{
        width: 300px!important; /*Tablet width*/
}
.mhb .second-row .mobile  ul.menu{
    width: 250px!important; /*Mobile width*/
}
.mhb .first-row .tabletMobile ul.menu ul.sub-menu span{
  font-size: 17px!important;
      line-height: 30px!important;
}
.mhb .second-row .mobile  ul.menu ul.sub-menu span{
    font-size: 16px!important;
  line-height: 30px!important;
}

2) The submenu font size is taken from Betheme -> Theme options -> Fonts -> Size & Style: Content.

Thanks

sarielg · May 2021

Hi

I tried change those but still the submenu font-size is too big in desktop view. I use Header Builder.

Kind regards Sari

Phil · May 2021

Please, try the following CSS code:

.mhb-view.desktop .mhb-menu .sub-menu li a span{
   font-size: 17px!important;
}

Thanks

Header responsive

Comments