Support Center Visit Demo License manager Buy @ envato

Header responsive

sarielgsarielg
in BeBuilder

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

D5B5285C-278E-4521-85BD-4A2A6EB67D92.jpeg

Comments

  • PhilPhil

    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

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • sarielgsarielg

    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

    Ipad-mini-device.jpg
    Ipad-mini-device-1.jpg
    Tablet-header-builder.jpg
    Sticky-menu-in-Ipad.jpg


  • sarielgsarielg

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

  • PhilPhil

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

    obraz.png

    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.

    obraz.png

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


    Thanks

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • sarielgsarielg

    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.

    Ipad-mini-screen.jpg


  • PhilPhil

    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

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • sarielgsarielg

    Hi

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

    1. Where the navigation menu in tablet and mobile view can be made wider ? Where I can find code?
    2. Submenu font-size is too big desktop view and I can’t find where to change it?
    3. 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?
  • sarielgsarielg
    navigation-submenu-problem.jpg

    Here is the screenshot

    Kind regards Sari

  • PhilPhil

    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.

    obraz.png

    Thanks

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • sarielgsarielg

    Hi

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

    Kind regards Sari

    submenu-font-size.jpg


  • PhilPhil

    Please, try the following CSS code:

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

    Thanks

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
Sign In or Register to comment.