Need some help/pointer with my Nav

HTML & CSS
1

Hi I received some great help here some weeks ago with my navigation. sadly I´m only able to work with my project whenever I have some free time, which is now :slight_smile:

I have encountered some issues with my .nav and some help would be most appreciated.

Here is a pen for my project:

For some reason the links are not centered. I have tried everything that I can think of to fix but have had no luck so far.

Also 2nd bug that is annoying me., when changing to mobile view when pressing the toggle/hamburger menu it drop-down and this looks fine however when closing it one can clearly see that the rest of the page is pushed by the menu. I would like this menu to go on top of everything and not push the rest of the site like it does now

I hope some CSS savvy guy could take a look at this :slight_smile:

Frederik

2

I have tried something new here and added an overlay menu like so:

This is what I wanted. :slight_smile: Some small tweaks are necessarily and I guess im looking for some expertise. I added icons in the overlay menu but when it closes it looks awkward. Also I have some problems to get the overlay menu appear right under the nav.

3

I have tried to tinker with this but really stuck here any help at all would be much appreciated.

4

Hi,

You will have to set some padding-top to the sidenav to stop it being hidden by the top fixed navigation. You can use the border-box model and soak up the padding so that you don’t exceed 100% of the viewport height.

Fixed positioned items are notoriously difficult to accommodate and should be used very sparingly. Trying to account for the flow is almost impossible for disparate elements like these and the best you can do is some magic number padding (or resort to much more complicated approaches using script or duplicate content).

I would not have duplicated the navigation either as that means maintaining two sets of links when you could have done it with one set and then just positioned them where you wanted for the smaller screen.

Anyway here’s a few pointers for the way you have it now.

I would set the overlay like this:

.overlay {
    box-sizing:border-box;
	padding-top: 6rem;
	width: 0;
	top:0;
	bottom:0;
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	background-color: rgb(0,0,0); /* Black fallback color */
	background: linear-gradient(top, rgba(232,232,232,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
	overflow-x: hidden; /* Disable horizontal scroll */
	transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}
.overlayopen {
	width: 100%;
}

I set the open overlay to 100% width because 90% looks very awkward and loses you the screen space when you most need it on smaller devices. (As these (header and sidenav) are fixed positioned elements I would suggest that instead of z-index 1 and 2 you make them a lot higher as they will need to sit on top of everything else e.g. z-index:1000 and z-index:999.)

You need to stop the vertical scrollbar showing when you animate the nav sideways which can be done by using white-space:nowrap on the items.

.overlay a {
	white-space:nowrap;
}

I would set a consistent width for the icons to align them better.

e.g.

#myNav.overlay a svg {
	width:2rem
}

Lastly you need to hide the sidenav when the page is opened wider and the subnav is showing. (i.e. you have reduced the viewport widh and the toggle is showing so you click the hamburger to show the sidenav but when you open the screen wider the subnav still shows along with the tonav).

@media screen and (min-width:767px){
  .overlayopen{display:none;}
}
5

Hi Paul thanks for your response , you are the best.
When I did not recive any response yesterday I used the day to read different guides and look for inspiration. here is what I came up with . I think it looks real nice now.

still some errors here and there if you don´t mind look at my reworked version:

  • I removed this in my latest edit also . I got the inspiration for non full size from cracked.com and I have also seen this variation elsewhere. But you are right 100% is better.
  • thanks for this tip. I will make sure to add this. this has been a big bug in my overlay menu.

Also I´m not sure why I get the gap or big top margin for the main navigation in Codepen

1 Like
6

Yes you have made some progress and it looks better.:slight_smile:

You may want to think about semantics a little more when you construct your html. Your html is full of divs which imply no semantics upon the html you present.

It looks to me as though the brand should be an h1 and that the nav should be a nav element with an un-ordered list nested inside. Only use a div when there is no other suitable element. Divs are basically a means of grouping elements together (or division) but have little semantic value.

Try adding top:0 to .Navbar

7

That did the trick. I added you suggested changes and now you could view it as intended . Not sure what else I could put in the overlay menu will need to look for inspiration I guess.

There is only 1 more error left with this navigation at this point and its the links in full screen view. They are somehow off center . I´m not sure why

8

Thanks for the tip. My work is starting to become more and more messy I would need to clean it up. Ill try to implement the suggested changes. The mess happens every time I try to add something new and try alot of edits before it works and codes gets quite messy afterwards

9

You will need to clarify as centre is ambiguous :slight_smile: Central in relation to what ? The links are perfectly centred in relation to the brand on the left and the sign in on the right. The links won;t be central in relation to the viewport because there is no correlation between them.

If you need the links centred in the viewport then you would need to make the brand and the sign in sections the same width so that when the menus centres it will be in the centre of the viewport.

10

Ok I see so this is where the problem lies, thanks for all the great explanation and help. . I think ill reread everything you have written to me thus far . When I first came here I did not have a clue what I was doing but now I´m able to work with a lot of different concepts thanks to you much appreciated. As they say I have gone from clueless to beginner :slight_smile:

2 Likes
11

Here is an example where links are centred in the viewport even when its left and right elements are varying length. It does again rather rely on a little magic number help in the form of a suitable media query at an appropriate screen width. The method relies on flexbox’s ability in some cases to adjust dimensions accordingly when pushed by content. The nav link content cannot be allowed to wrap or it would try and wrap in a tiny space so white-space nowrap forces the issue.

This is about the only way to do this without using absolute positions for the left and right items and once again would need magic numbers to account for overlaps.

(Note the side links for small screen are the same html as the top links for wide screen - No duplication of html required)

2 Likes
12

Hi again Paul.
Thanks for looking more into this very good job indeed:) I also liked your floating hamburger and animations I might steal that :slight_smile: Im not sure how long time you used on that pen but for ne that would have taken days if not weeks :=)

  • The links did not behave the way that I wanted and couldn’t figure out how to fix. So I did what one is not supposed to do and took the shortcut solution to fix it.

I also found a sample here https://www.codeply.com/go/qhaBrcWp3v today. For me it looked like they segmented the navigation into 3 parts or divs in order to get the links into center.

The hardest part now would be to decide which layout I would be happy with . It´s really hard to be a perfectionist without skills to back it up . I think this is my 7th version of the navigation. But I feel it has become better for each attempt .

Also after reading another guide here yesterday (can not find it in my history) I was able to place all links, buttons and logo into a list like so:


: atm its only working in full width as I am really unsure how I should proceed with my project

13

@ PaulOB

Good morning I made some changes in the pen above. Now I´m gonna take a more in depth look at your pen and
see what I want to implement. You had some simple but effective animations, but is there somehow possible to stop the effect from happening when zooming ? looks a little strange when zooming and the links moves from the top to the right.

What is your thoughts about 2 row navigation? I was thinking something like 2 rows navigation for full screen width and push the 2nd row (which should contain links) under the slider . I think this might improve on the layout.

Also we talked about 90 vs 100% width for overlay menu after looking trough tons of pages throughout the web I have noticed that the preferred way to do this is 90% width for mobile view I most admit your setup looks pretty slick with a 90% width… Again I most say good job indeed :slight_smile:

14

Why?

That’s not semantic. The nav items are a list but your brand is not a list and the sign-in and register are not really a list either. I would not do it like that but each to their own :slight_smile:

Yes that is using flex and although uses slightly different flex methods to mine (and a little over-complicated) is basically going for the same effect with the same caveats.

Not quite sure what you mean and what zoom has got to do with this?

If you mean opening and closing the window then the fact that you can see the top nav slide into the left side of the window as you meet a media query breakpoint then that is by my design and a great accessibility aid. Users are completely mystified when elements disappear suddenly and animations can show that something has happened and the menu items have moved. Animations should be used to help the user and not just for a pretty effect.

If you meant something else you would need to explain? (There are some things that need to be tweaked such as opening and closing the window when the menu is already opened at small screens as the background fades in after the text is shown so i would need to look at that if I was bothered :slight_smile: )

It all depends on what else is happening? If the top menu is to be position:fixed (or a fixed height) then you want as few links as possible. I can’t answer that question as it depends on what comes next and then what comes after that. Elements can’t really be seen in isolation but in the whole context of what might happen next :slight_smile:

Generally though your main nav links should be as succinct as necessary. I don’t really have any thoughts about one row or two rows as my main concern would be how easy is the site to use and navigate. If you have 500 links at the top of the page I would probably go to another site instead :slight_smile:

I would rarely code 90% because that excludes 10% of real estate (I avoid percentages where possible anyway and use a min/max-width approach instead without using percent at all e.g. 90% of my 27" imac is massive and unusable for most designs). Most mobile overlay menus come down from the top at full width and those that come from the side would be full width for smaller devices and maybe a max-width for larger devices. I would not like a mobile overlay taking up 90% if space was at a premium. Again it all depends on the final ‘real’ content and what needs to be achieved. There is no one size fits all answer.

Here is a rather old template (about 3 years old -which is old on web terms) I did as a demo for someone else on the forums and shows a slide in menu and has three different actions depending on browsers width. At wide desktops the menu slides out and the page content is reduced in width to accommodate. As the page gets smaller the menu then slides on top of the content instead of moving it to the side. At smaller widths (mobile) it slides out out but its width is set to the smallest device so on an iphone 4 & 5 you get a full width overlay but on bigger iphones you get the small gap to the side. This is the benefit of not just using 90% but a min/max-width approach.

http://www.pmob.co.uk/temp2/template1/index.html

It’s only meant as a starter template and there’s loads of room for improvements and embellishments. The mobile menu will also work when js is disabled unlike the one you have implemented (my other codepen demo also works without any js at all).

It was built in about 30 minutes or less but uses bits from other demos of mine to speed up the process.

4 Likes
15

I forgot to mention you have made a grave mistake in this rule in your code.

html, body {margin: 0; height: 100%; overflow: hidden}

The overflow:hidden effectively kills all the scrollbars on your viewport and is unusable if content exceeds viewport height (which it most certainly will do).

Remove the overflow:hidden. :slight_smile:

16

Don´t worry about that This is not a part of my main file. It was just something I added last minute in the pen to remove the scrolling as the project looked wired when I was able to scroll with the overlay menu open. You do not miss a thing do you :stuck_out_tongue:

1 Like
17

Thanks for very informative and lengthy post. I really like your in depth explanations

I found the link I mentioned earlier in my history now:

As I do not know anything (yet) I need to rely on using what is considered market standard approaches and when I understand that I can probably deviate from set “rules” . You seam very knowledge so I think Ill follow your sample. at least I was able to remove a lot of those div elements like you mention earlier.

I did see that in your pen and I guess this is a great mistake:

.nav-wrapper {
  width: 80%;
}

I mean if you zoom in on the browser (ctrl + on windows) until you hit the break point where the links gets hidden. I think the animation is a little crazy but like you said it really shows what is happening to the end user.

  • The link is broken ?

In the end you sample looks much better then what I have made. I have a lot to work with now thank you :slight_smile:

1 Like
18

The link is fixed now :slight_smile: I missed the l off html :slight_smile:

As I said above there is never one answer or one way to do something so you have to decide for yourself armed with all the best information you can gather.

19

Don’t use zoom as a way of changing the layout size. Adjust the browser window to do that.

I only zoom text when I zoom as I don’t want the whole thing to get bigger. It’s just the text I want bigger so I can read it :slight_smile:

Of course the page should not break on zoom but it will look different as some things won’t zoom st the same rate due to rounding errors.

Also remember that it’s usually only developers who keep opening and closing or zooming up and down all the time and users will rarely see the breakpoint changes occurring. They see the view that fits their opened browser.

20

Do you mean resizing the window ?

I guess I keep forgetting this :slight_smile:

You have given me a lot to work with. its starting to become fun to create this page.  
I do hope I lose my day job so I can spend more time working on this web page :=)
1 Like