Change:
When the user uses FreeCodeCamp on narrow screens like the Samsung galaxy fold, the FreeCodeCamp logo overlaps with the drop-down menu button and profile picture at the top of the page. to '' the developer tools dimensions select "Galaxy fold". the .png example in the screenshots section As a suggestion in this type of screens <= 280px * 653px we could remove the FCC fire logo or remove the profile picture to follow the responsive design rules. ! Device: [Laptop, Samsung Galaxy Fold, Pc] OS: [Android 12L ,Windows 11] Browser: [Chrome, OperaGx] No response
Bruce mentioned the possibility of changing the logo in this PR too I am kinda in favor, because of how many people started to associate freeCodeCamp with fCC, so change in logo may be possible. Note: that screens with size lower than aren't required to be supported as mentioned in his comment as well.
btw, the logo is on higher stack above the menu, so it isn't possible to click the menu. If we aren't changing the logo, changing the layout is the other option.
Hi What do you think about leaving only the "FreeCodeCamp" logo and removing the symbol? I think it would look more aesthetic xD and all the space would be fixed.
I think a part of the menu will still be blocked , but I hope I am wrong. Your suggestion may be better than fCC, but I don't know the workflow on removing and how important it's. Another dev or prolific contributor with more experience can indicate how important is the glyph.
I have solved this issue by dropping the fire icon. This is how it looks like. https://user-
Hey If you are working from a mobile Android device we recommend downloading the freeCodeCamp mobile app, which has a good mobile experience for the Responsive Web design certification.
Hey Thank you for making this change, although this works, it is in violation of our style guidelines. Please see them here: https://design-style-
yeah, I was thinking that it will go against the guidelines. I think putting the "sign in" button inside the "hamburger menu" for small screens can be a possible solution.
If I am reading the guidelines correctly then just the glyph can be used. I'm sure the app is fine, but the web-based version should provide just as good an experience as the mobile app or we are doing something wrong. Also, just to be clear, since I might have started this in the first place, I am not insisting in any way that we adjust the header for very small widths. It was just an offhand suggestion in another PR that was somewhat related.
Yes. It probably wouldn't hurt to have a breakpoint that switched to the glyph, though I feel like this has been brought up (and turned down) before? might have more insight.
Hello, I am available to work on this issue. I believe I can solve this up you can Assignees the issue to me
I have resolved the Navbar logo responsiveness bug in the Galaxy Fold This is how it looks like.And i can Make a PR !
diff my name is vivek
diff my name is vivek my name is vivek yadav
We could go with the glyph or make the logo a bit more responsive. Either way would work.
Because there are 4 PRs opened doing the same thing, I want to clear the requirement to close this issue. The CSS solution, the issue is cased by the existing property of in , removing it and refactoring the layout of the navbar, will sort the issue as shown below, without the need to add another break point. Why am I against adding a break point? because it's a solution to a side effect and not the solution to the real cause of the issue The HTML solution, use element with fallback to glyph SVG. You can find the glyph in the .
For context, either solution is an enhancement to the navbar, so if a PR is fixing the CSS, while the other is changing the picture element, I wouldn't mind approving both, as both will be an enhancement to the current navbar. But maybe it's better to choose one option, before opening this for contribution so I am pushing it to triage again.
Shouldn't the element be conditionally rendered using the component instead of just being empty? That way it won't push the logo and the logo doesn't have to be position absolute. Code we have now wrapping the element instead. I only looked at this briefly so I will admit I might have missed something. Edit: I made a PR just to show what I mean.
Yeab, you are correct.

Discussion:
} #universal-nav-logo { <del> display: flex; position: absolute; </del> padding-top: 0.2em; <del> top: 0; </del> } .expand-nav {

className={`universal-nav${displayMenu ? ' expand-nav' : ''}`} id='universal-nav' > <del> <div className={`universal-nav-left${displayMenu ? ' display-search' : ''}`} > <Media minWidth={SEARCH_EXPOSED_WIDTH + 1}>{search}</Media> </div> </del> <ins> <Media minWidth={SEARCH_EXPOSED_WIDTH + 1}> <div className={`universal-nav-left${ displayMenu ? ' display-search' : '' }`} > {search} </div> </Media> </ins> <Link id='universal-nav-logo' to='/learn'> <NavLogo /> </Link>