Hi
I have a very simple navbar with a logo two links and a login button. It collapses into a hamburger icon, but I would like to still preserve just the logo and login button on xs. What is the best way to do that?
Are you saying you don’t want to see the hamburger icon at the XS screen size? (so people will have no way to navigate your website?) or do you want the links to be visible at XS size and also have no hamburger menu appear?
If it’s the first, just select the Navbar Toggle component in the Overview panel (or click on it on your website in the workspace), go to the Options Panel > Responsive Display > Display and select None.
If it’s the second, Select the Navbar in the Overview panel (or from the workspace) go to the Options Panel > Expanded and select Always.
Hi
Simpler than that. I misspoke it is really just the logo on the left and the login button on the far right. The logo is taller than the hamburger image. In xs the logo reduces to the hamburger image and the login button is gone. I want to keep both in xs. Is there a setting in the navbar to prevent the collapse into the hamburger image and removal of the login button?
If you don’t ever want the hamburger icon to appear (meaning you don’t want the Navbar to ever collapse into the mobile state), select the Navbar in the Overview panel (or from the workspace) go to the Options Panel > Expanded and select Always from the dropdown menu. Then the Navbar never collapses into the mobile mode. It’s an odd choice, but without seeing your website, I can’t say if it’s good or bad.
As to why your brand logo changes size, this shouldn’t happen unless you have Image Options > Responsive selected (which you would normally want.)
Assuming your image is inside Navbar Brand in the Overview panel, if the Responsive setting is unselected, the image will stay at its native size even if the width of the browser window becomes smaller than the width of the image. If the Responsive setting is selected, the image will shrink as the width of the viewport shrinks, but by design, if the Navbar collapses into mobile mode, the hamburger icon will always appear, and it will always wrap to the next line below the Brand image (regardless of whether Responsive selected or not.)
If the login button is inside the Nav component (which it will be if you used a pre-made Navbar that came with the program) then the button didn’t disappear, it’s inside the mobile (hamburger) menu. If you set the Navbar Options > Expanded to Always, your button will always be visible (though it may get cut off if the contents of the navbar are wider than the viewport.)
If you want the Login Button to be visible at all times regardless of how you set the Navbar Options > Expanded setting, you have to move it outside of the Nav component (like in between the Navbar Brand and Navbar Toggle.