Before you ask please READ THIS

How can we make header with center logo not spill into a second row? At only 1400px it breaks

I had this issue a number of months ago and hoping there is a fix now? I have to think a number of people would be coming across this issue as there are only 6 menu tabs.
http://nxw.e9b.myftpupload.com/
BIG UPS RIFE Fam! pls let me know as this is a fav menu style but need to resolve so the menu isn't forced to be so narrow THNKS

Comments

  • AirAir
    Posts: 10,970
    Hey :-)

    This issue highly depends on what options you will use in the header, and that is why there isn't a simple solution to this.

    I can not open your site(endless redirects loop error), so I will base it only on your screenshot.

    When you add one of the tools to the header(hamburger on the right in your case) or social icons on the left(you didn't use it), I have to reserve same size space on both sides of the header. Otherwise, it will not be visually nicely centered.

    I usually give customers such custom CSS to fix it:
    @media only screen and (min-width: 1025px) {
        .header-variant-one_line_centered .socials-cell, .header-variant-one_line_centered .tools-cell {
            width: 0;
        }
    }
    In your case, you should probably increase it to width: 40px; or similar value.

    I believe I could add a setting to customizer, where you could decide how much space will be reserved on both sides for "other header elements" - what do you think about such a solution?

    With kind regards.
  • edited November 2018 Posts: 59
    YAS!! Air that would be ideal, to give us that option for 'other header elements'! Hmmmm I tried that CSS and it is not helping. Is there a way to control where breakpoint is for header to go to mobile/hamburger icon (like 1440 px is what I would need to avoid menu breaking into this second, or even third row as you can see)
    BIG THNKS for assist and awesomeness!
    Screen Shot 2018-11-16 at 1.19.03 PM.jpg
    3360 x 1964 - 605K
    Post edited by Air on
  • If we can't fix we have to switch to Salient theme (attached, great on all devices) as this site has to go live tomm. Ideally to have this awesome header/menu style options would be amazing!
    drgerstman.demo.site-mobile1.png
    360 x 640 - 192K
    drgerstman.demo.site-mobile2.png
    360 x 640 - 71K
  • AirAir
    Posts: 10,970
    Hey:-)

    I have removed your data, so your site wouldn't get hacked unless you want too ;-)

    I can help you with CSS fix. I will not be able to deploy new update during the weekend with an additional setting. I also am in the middle of a bigger task, so until I am done with it, there will be no update;-)

    However, I will add this setting in the next version.

    I still get "too many redirects error". Tested on Chrome & Firefox. Can't access your site at all.
    Check yourself in private mode in the browser.

    It is midnight here so time to sleep:-)

    With kind regards.

  • Ahhhhhwesome with the CSS assist/fix tommorrow Air BIG THNKS and great to hear about future update for this issue #YOUROCK!
  • I was having some issues after synching the SSL, too many redirects (which you were seeing before) the site is good now (few images missing though) https://bos-beauty.com and same login I posted earlier BIG THNKS Air!
  • Also, any idea why top bar custom color and white text is not showing (I just want to ask about any issues all at once Air so I don't have to keep bothering you man!)
    Is there a way to have this cool menu style on hover but not have on 'active' rows (scrolling one page styles with custom IDs)
    And Ideally if the mobile logo was closer to the left of phone view and icon more to the rt pls?
    Just want client happy THNKS
    Screen Shot 2018-11-16 at 5.50.08 PM.jpg
    3022 x 1260 - 410K
    Screen Shot 2018-11-16 at 5.50.21 PM.jpg
    2808 x 1258 - 369K
    Screen Shot 2018-11-16 at 5.51.51 PM.jpg
    794 x 1490 - 106K
  • I just bought ya a Latte brother, and so you know, it kinda looks like the java prices are thousands of dollars! check screenshot, just so you know I would change , to .
    Screen Shot 2018-11-16 at 5.54.22 PM.jpg
    990 x 1004 - 110K
  • AirAir
    Posts: 10,970
    TheWebStylist said: it kinda looks like the java prices are thousands of dollars!
    Haha, you are right! In Poland, we use comma as decimal separator. I know that in the US comma is used as a thousand separator. I will fix it. Thanks for the coffee man!

    -------

    OK, what I have done:

    1. I have removed the doubled version of Apollo13 Framework Extensions plugin, as it resulted in some options missing in the customizer.

    2. Added such Custom CSS(in Customizer -> Custom CSS panel):
    @media only screen and (min-width: 1025px) {
        .header-variant-one_line_centered .socials-cell, .header-variant-one_line_centered .tools-cell {
            width: 0;
        }
        .header-horizontal #header .head {
            padding: 0 15px;
        }
    }
    It also reduces padding of header from 40px to 15px.


    3.
    TheWebStylist said: And Ideally if the mobile logo was closer to the left of phone view and icon more to the rt pls?
    Added such Custom CSS(in Customizer -> Custom CSS panel):
    @media only screen and (max-width: 1024px) {
        .header-variant-one_line_centered.mobile-menu .socials-cell{
            width: 0;
        }
    }
    -------

    Work for you:
    TheWebStylist said: any idea why top bar custom color and white text is not showing (I just want to ask about any issues all at once Air so I don't have to keep bothering you man!)
    You are using a dark variant of the header on the homepage. Either change it to normal or adjust settings in Customizing ▸ Header settings ▸ Variant dark - overwrites .

    Read more https://rifetheme.com/help/docs/customizing-the-theme/header/variant-light-dark-overwrites/
    TheWebStylist said: Is there a way to have this cool menu style on hover but not have on 'active' rows (scrolling one page styles with custom IDs)
    It would require to mess around with lot of CSS. I am not sure I will be able to do currently.
    You don't want to highlight active sections while scrolling?

    With kind regards.
  • Hey Air,

    Hmmm what am I missing, I tried 3 browsers (chrome, safari, firefox)/after I cleared Managed Wordpress cache option and seeing same stacked menu rows issue.
    And I don't mind the section/row menu highlight (though the option to hide would still be great to have) but it's highlighting 2 sections sometimes which def looks odd.

    I inputed all your CSS (I would really appreciate if you would just do, make sure it looks good there/all fixed Air so I don't have to keep bothering you) but still nothing helped/all looks as it did.
    I really think I have to switch to another Elementor friendly theme so I have no header/menu issues on any devices as I have to have this site live tomm. Having easy, super customizable header/menu styles really priceless these days (especially so it showcases true, unique, custom site flavor and #mobilefirst! I have first pumped for over 3 years and finally clients are starting to know this is true.

    Best all ways forward,

    -Sterling
    #TheWebStylist
    Screen Shot 2018-11-17 at 12.46.37 AM.jpg
    2696 x 1968 - 543K
    Screen Shot 2018-11-17 at 12.50.35 AM.jpg
    938 x 1616 - 105K
  • And YES I understand the Top Bar/Text/links White color option now BIG UPS man!
    Screen Shot 2018-11-17 at 1.05.17 AM.jpg
    1844 x 1496 - 227K
  • All Looking GOOD man Thnks! Curious, how do I increase size of mobile menu icon...?
  • Heyy Air,

    I just doubled check the breaking menu issue and it's still happening. I have to present the site tomm (there is a Coming Soon page up right now and I removed the menu yesterday but added just now to double check and when I slide browser window on my laptop to make it smaller, it is still breaking) Can the padding on left and right pls be removed asap man? Otherwise I have to change themes tonight. pls thnks!
  • Screen Shot 2018-11-18 at 3.24.50 PM.jpg
    3360 x 1964 - 715K
  • I am building the site with a girlfriend of mine who I do a number of projects with and she built a sub menu but we are now seeing the mobile menu icon... are submenus not allowed with this header style Air....?
    Screen Shot 2018-11-18 at 7.10.39 PM.jpg
    2434 x 1298 - 306K
  • I see now the submenu options, but can it be so submenu shows on hover or when click #Services tab? Apglz for rush, we are just trying to finish for tomm man, Big thnks
    Screen Shot 2018-11-18 at 7.21.26 PM.jpg
    2010 x 1336 - 163K
  • AirAir
    Posts: 10,970
    Hey:-)
    TheWebStylist said: just doubled check the breaking menu issue and it's still happening.
    It seem it worked on FireFox but not on the Chrome. i have now corrected it once again and it should be good now.
    TheWebStylist said: Curious, how do I increase size of mobile menu icon
    Customizing ▸ Header settings ▸ Tools icons - individual icons ▸ Mobile menu button icon size.

    Soon next answers.

    With kind regards.
  • AirAir
    Posts: 10,970
    TheWebStylist said: sub menu but we are now seeing the mobile menu icon
    Icon is set in Customizing ▸ Header settings▸ Main Menu▸ Submenu/mega menu opener icon.
    TheWebStylist said: submenu shows on hover
    Not possible sorry - please read here https://rifetheme.com/help/docs/customizing-the-theme/header/main-menu/#submenus
    TheWebStylist said: or when click #Services tab?
    Sure - use optiton "Making menu item not clickable" when adding menu http://rifetheme.com/help/docs/basic-setup/menus/menu-enhancements/

    With kind regards.
  • RIGHT ON AIR!! #YOUROCK! 🙌🏻
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!