It’s not an easy question to answer as there are a lot of variables but you would need to try and keep line length to about 65 - 85 characters. Of course that will depend on the size of the text at various screen sizes and whether you want to arrange the text in columns rather than stretch across the page.
Read this article first.
I did. Thanks Paul - interesting read. I will try keep blog and archive page line length at 85 characters max. I am currently working on the top menu. I came across this minimalistic nav which I am trying to implement on my site. Behaviour I am trying to achive
Keep logo and navigation vertically centered in both desktop and mobile view. I put higher breakpoint @media screen and (max-width: 1500px) as I am looking at the home page on my Dell U2412M 24 Inch monitor. I tried giving a height to .header nav container and then use align-items: center - it had no effect
There’s hardly visible flickering/sliding out of border-bottom: given under ‘@media screen and (max-width: 1500px)’. You can see it when you hit the breakpoint. My understanding this is due to
transition: all .5s ease; Try load the page and then just start resizing the screen. You can also see it in the author’s original CodePen
Say I want portfolio thumbnails become two column when screen is 1000px (for desktop), do I add media query or it can be done by manipulating other grid properties?
Please see an updated link from post #1
You are fighting yourself a bit here.
You turned flex off so align-items will have no effect. Put flex back on and then the nav will vertically align with the logo.
Don’t float the toggle but once again use flex to align items horizontally and vertically. We don’t need floats much at all these days except to wrap around blocks of text. The toggle can be moved to the far right with a simple margin-left:auto. Auto margins soak up all the space on the side they are applied and effectively push the element to the far edge.
However as you have a 100% nav in place that you want on the next line you should set flex to wrap so that the navigation moves down.
These are the changes you need.
@media screen and (max-width: 1500px){
.header nav {
display: flex;
flex-wrap:wrap;
}
.header nav .label-toggle{
float:none;
margin-left:auto;/* I would also give it a little right margin to move it off the viewport edge. The same for the logo*/
}
}
Which elements border are we looking at? Can you specify the item and which border as I didn’t notice anything on my screen but was probably looking in the wrong place.
You can try just transitioning the height and opacity instead of all.
e.g. transition: height .5s ease, opacity .5s ease
Note that you haven’t removed the default 40px left padding on uls so add padding:0 to the nav ul.
Just add a media query at the breakpoint you want and change the grid-template columns to repeat(2,1fr). (You could probably do it with a variation of min-widths and auto columns but its not worth the effort.)
I’ve added those changes - still if you try to resize when it hits breakpoint and menu becomes ham icon, logo and ham kind of vertically centered a bit but not completely. I tried adding height to .header nav at breakpoint - didn’t help.
Please see an updated link from post #1
I’ve added flex-wrap but it seems to help margin-left:auto; .header nav .label-toggle and not wrap the nav on next line. Without flex-wrap on .header nav at 1500px, ham icon just sticks to the image meaning margin-left: auto not working. I am not sure I understand why this happening.
If you comment out all image thumbnails you would see some “trace effect” of the menu disappearing. I understand this is because of transition: property - I tried removing it completely it helps but I lose transition effect. I guess it weather I keep it as you suggested or remove it completely
It is perfectly centred.
The extra space at the bottom is the margin on your ul and not part of the centring area as such. Set margin:0 to the ul in relevant media queries.
.header nav ul{margin:0;}
Remember uls had default margin and padding and you need to control them explicitly,
With the margin:0 in place the gap under the logo disappears (apart from the margin you have on the logo).
Without flex-wrap the menu will stay on one single line. That means you have your logo then your toggle then your 100% nav. The nav is hidden but still takes up space as visibility:hidden does not remove the item from the flow unlike display:none. Therefore if you could see your nav it would be pushing out the right side of the viewport.
In this scenario the margin-left:auto on the toggle has no effect because there is no free space on that row. There is a logo, a toggle and a 100% nav. They are all squashed together in one line.
As soon as you add flex-wrap to the parent then the 100% wide nav is moved to a new line and the the toggle has empty space all the way on its right to the viewport edge. The margin-left:auto pushes the toggle to the right edge because now there is nothing in its way.
If you made your nav visible it might be easier for you to see what’s happening.
You want to avoid fixed heights on fluid content most of the time. They only complicate things and are not fluid enough for responsive design.
You are not hiding the overflow on the ul so when the transition occurs and you change the height then the elements no longer fit in the space available and show outside until they fade away.
I’m not keen on the height animation on that menu as it fixes you to a height and indeed if someone resizes text or you have more or less menu items then your menu fails.
You can use the max-height trick and use a max-height larger than you need in order to get some animation and to allow some leeway with the menu size.
This is the code you need.
@media screen and (max-width: 1500px){
.header nav ul{
overflow:hidden;
height:auto;
max-height:0;
transition:all .5s ease;
}
.header nav #menu-toggle:checked ~ ul{
height:auto;
max-height:35rem;
}
}
However I am not keen on that method either as although it is miles better than the height method it uses a magic number for the max-height and magic numbers need to be avoided at all costs.
Unfortunately in CSS there is no way to animate/transition from height:0 to height:auto as CSS does not animate auto measurements. I prefer to slide in menus from the side instead to avoid this issue.
These are very old and pretty rough demos but you should get the picture.
http://www.pmob.co.uk/temp2/template1/index.html
I am sure its easy but I think I am doing something wrong. I commented out .header nav ul /* visibility: hidden; */ under 1500 px media query and also tried to change it to visibility: visible; - it had no effect. Am I doing it on the wrong rule set?
…sooo simple omg…thanks 
sorry do I need to replace my current code with your code or just add to it? I tried both…looks like I am doing something wrong 
The code I posted was an addition so you could just paste and text without much trouble.
The code is the same code I injected locally into your live site so I know it is working.
Obviously once tested it should be integrated into the original rules. If you have updated your live site I will see what went wrong when I get back to my computer later this morning
I just looked at your page and it seems to be working (apart from the missing margin:0 on the ul I mentioned earlier).
Are you still having the same issue as before?
It looks better to me and you are not getting the nav drawn to an incorrect height as you were before. The slide effect seems ok.
I’ve added your code and updated the original link (please see post#1 for the link). When you load the site can you try: 1) resize the window back and forth without clicking ham icon 2) resize the window back and forth after clicking ham icon. Definitely I didn’t incorporate your code correctly…
I think you are referring to the fact that you can see the open menu transitioning when you go back and forth across the breakpoints once opened. Yes this is due to the ‘all’ transition which lets the element slowly fill the available width.
You can change it back to my other suggestion but use max-height instead of height as the transition on the ul.
e.g.
transition:max-height .5s ease, opacity .5s ease
Does this solve the problem or was I looking at a different problem?
Bear in mind that ‘most’ users will not be opening the hamburger and going backwards and forwards with the browser width (this is something mainly developers do for testing). Indeed I actually like to see the menu disappear slowly as it turns into a hamburger. This gives me a visual clue that something has happened. Quite often I move my window and something disappears but I don’t know what it was. Was it important and where did it go
I did. It works well now with a smooth disappearing of the menu. Thanks Paul. I’ve updated the link. I am not sure yet if I wish menu to hover over the thumbs (for which I have your other thread where you showed me how to do it with z-index) or just leave it like that. I think once I add rest of site pages it will be more clear for me if I want to do it or not. I will move to working on next page for now. The only thing is when I inspect the code with chrome dev tool I see some rules crossed out - I know this is due to those rules being triggered early in the stylesheet. What is the purpose of that? It doesn’t mean I have some duplicate rules, does it?
It depends which rules are crossed out and why.
You are always going to get some rules crossed out because the user agent stylesheet styles will be over-ridden by your margins and padding (for example) rather than the default margin and padding. That’s generally what reset stylesheets were about as they reset the defaults to something more usable. However rather than using a reset its best to take control of the rules yourself and remember to set margin/padding as you go.
There will also be rules crossed out because a media query kicks in and changes previous rules for its new layout.
Of course you should avoid rules that are duplicated or property/values that are duplicated for no reason. If you scan through your stylesheet you can usually see if something is amiss or if you have overcooked it in places.
Remove the !important from your body rule as its not needed.
Hi Paul,
I am thinking of may be adding underline animation on hover for top menu.
Can you recommend tutorial with menu item underline animation? Does sitepoint have any recent tutorials on that topic?
I did try googling the topic but not sure if those tutorials are good…
Thank you
It depends on what you are after but here’s a start.
I am following the second link with simple transition on hover. Please see updated link from post#1.
Issue: in Chrome when links are no longer on hover, there’s little dots left over after transition. Only happens in Chrome. I tested in Firefox and no such dots
