- This topic is empty.
July 19, 2013 at 6:57 pm #46548
I created a Navigation Bar with a logo in the center. My goal is to get the links to be on both sides of it in the center.
You can see what I mean here:
EXCEPT that I wanted the bar skinnier. There comes in the second alternate version where the bar size is perfect but the links are not going on both sides equally now because of the change in code.
So basically I would like the size of bar like the 2nd one, but with the links setup on both sides like in the first link.
Any idea how to fix this?July 19, 2013 at 7:30 pm #143618
There’s a few discussions on this already.July 19, 2013 at 9:10 pm #143594July 20, 2013 at 1:00 am #143602Paulie_DMember
My inclination would be to use inline-block, text-align:center and vertical-align:middle.
Pretty close. Adjust any numbers as required.July 20, 2013 at 7:50 am #143612
I would use absolute positioning because there should be `
` in there. It shouldn’t be inside a list item.July 20, 2013 at 8:09 am #143597Paulie_DMember
It’s an option.
I suppose one could dispense with the menu and just use anchor links and the Codepen think would still work with a little tweaking.July 20, 2013 at 8:51 am #143581July 20, 2013 at 12:12 pm #143634
@Paulie_D thanks man, tried the method from your codepen and it worked! I guess my problem was that I wasn’t putting it as a background-image.
thanks everyone else who chimed in as well!July 20, 2013 at 7:33 pm #143814
I would go with wolfcry’s solution. But I’d wrap an `
` around the anchor.July 20, 2013 at 9:44 pm #143821July 21, 2013 at 8:28 am #143883wolfcry911Participant
jbs93, you can’t just take my css and plug it into your page and expect it to work with your html. You’ll need to make adjustments. The logo needs to be positioned absolute, not relative. And you’ve added an h1 around the anchor (like chrisburton suggested) which is fine, but now you’ll need to target the h1 and not the anchor. Then you’ll need to make your ul wider to accomodate everything. And finally adjust the left margin on the fourth line item.July 18, 2016 at 8:56 pm #243687cbgraphicsParticipant
wolfcry911, you are the best person in the whole world. I created an account on this site just because of your awesomeness.
Thanks for that pen.
- The forum ‘CSS’ is closed to new topics and replies.