Hi, Im trying to workout how to give some good spacing between this logo and menu:
http://web-legend.com/makeitpop
I’ve tried margins and padding but it doesn’t make a difference even when it’s added.
You’d be better off rethinking this layout. You’ve got flex working in there, but you’re using position: absolute unnecessarily on the logo, which takes it out of the flow. Better to use flex for all the items at the top there.
Works for me:
@media (min-width:992px){
.mip-header .navbar.is-centered .navbar-left {
margin-right: 15rem;
}
}
As Ralph said it would be better if they were all controlled with flex.
HI Guys, this worked but I get what you are saying about the Flex. I’d like to try giving that a go is it just as simple as putting a container on the logo with a display of flex and then make the logo display flex as well?
I’m trying to learn Flex but I’d like a good project to follow to fully understand it.
It would be a little awkward with that structure as you really want the header elements to be siblings so that you can re order them with flex. At present your left nav items and right nav items are in their own container and you would basically need the logo at the same html level so that it takes part in their flow.
You’d have the same issue with grid in that there are nested structures and so you’d have to resort to subgrid which is adding more complexity.
If the margin is working for you at the moment I would stick with it unless you want to refactor the way the header is structured.
Ok that makes sense. Do you know of a tutorial that deals with these structures for me to practice with?
There are quite a few tutorials around and it really is a matter of trying them out and then practicing the layouts before you try to implement something for real. It can take a little while to get the basics down but once you do you’ll wonder how you managed without it.
Here’s one tutorial I just saw but there are loads of others and videos around.