Need help with a menu bar

[cyberpike]

Your screen has to be less than 768 px to view what I’m talking about BTW.
You can see there is padding on the left when you hover over the links. I want these bars to fully extend. Not sure what I’m missing.

http://codepen.io/cyberpike/pen/PzabKY

[Beverleyh]

Not sure what I’m missing.

Default padding on list elements.

Not sure what I’m missing.

Forum etiquette.

You’ve asked several questions now, received help for all, and not once have you acknowledged the help given to you with a simple “thank you”. Please consider that community spirit goes both ways, and the help you ask for may not be so forthcoming in the future if you maintain the absence of courtesy.

[cyberpike]

Thank you, I didn’t mean to offend. I marked all you answers as helpful….

Default padding means what?

[Beverleyh]

Thank you. That’s appreciated.

ul elements (as with many other elements) have default padding – so the bullets don’t go outside the container. It’s for this reason that you get CSS resets/normalisation – to try to standardise everything across browsers, that otherwise have different ideas about what the defaults should be. So for your ul.topnavmobile, setting padding:0; will neutralise the default list padding and allow the link inside to span full width.
But, you have a few other declarations against that element that can come out; overflow:hidden; and I think right:0; and left:0; too (I’m on mobile now so can’t do any thorough testing). I think you might have put those in there by way of counteracting the left hand gap, but now they aren’t needed because the padding:0; reset sorts it out.

Hope that helps

[cyberpike]

I’ll try that out thanks!

[cyberpike]

That seemed to work thanks! What does overflow hidden do?

[Beverleyh]

What does overflow hidden do?

It’s frequently used on a container to clear floated child elements. You might have seen when there are floated elements inside a container and the container is collapsed? Like whatever is inside has “escaped” and the container no longer wraps around or expands to the height of the stuff inside? You have to clear the floats in order to fix the parent’s collapse. Here’s an article with demos to explain https://www.sitepoint.com/clearing-floats-overview-different-clearfix-methods/

I see there’s a comment in your CSS that says something about floating list items side by side (maybe the li’s are distributed horizontally on wider screens elsewhere in your CSS?) so I imagine it’s a remnant of that.

But if you do have the menu buttons floated side-by-side on a wider screen (you may have removed that part of the CSS for the benefit of your demo), you’ll probably still need to clear them using something other than overflow:hidden;
You could try the clearfix method from the article above.

Another way is to avoid the need to clear floats by not using floated elements at all. You can do this by setting the li’s display property to inline-block. The down side of this though is the annoying little gaps that emerge between inline-blocks, but they’re easy enough to deal with https://css-tricks.com/fighting-the-space-between-inline-block-elements/.

Alternatively, CSS tables or Flexbox can be used to distribute menu li’s horizontally. Examples of those options can be seen here https://www.sitepoint.com/responsive-fluid-width-variable-item-navigation-css/

All of this only matters if you have your menu buttons laid out horizontally somewhere though.

[cyberpike]

Ok cool, thanks! I think I figured it out, now (hopefully) the next challenge will be getting my logo in the center of that bar somehow.

[Paulie_D]

Not sure what I’m missing.

Posting the same question more than once is also not considered good practise.

As I recall this is not the first time you have posted in BOTH “Design” and “CSS”….please just pick ONE in future…from the nature of your questions I’d suggest CSS.

In the interim, I’ve cleaned up the other question(s).

[ibrahim1995]

@media (max-width: 768px)
ul.topnavmobile {
list-style-type: none;
overflow: hidden;
background-color: #00DAFD;
/* right: 0; Remove this /
/ left: 0; Remove this*/
width: 100%;
margin: 0;
padding: 0;

I think it will work fine.

[cyberpike]

That’s a problem with your mobile site, not me.

[Author]

Posts