I’m having a little trouble getting the main menu parent menu items to be full width (not necessarily with the screen but within its container). I’m not sure what’s causing the parent items to not go full width. I’m suspecting it’s Bootstrap’s ‘box-sizing’, but I cannot be sure.
Suggestions?
Try using .container-fluid instead of .container
Is this the effect you’re trying to get? I’m not sure if I understood your question fully.
To the stylesheet djmenu.css add,
.dj-main li.dj-up {
width: 14.2%;
}
Hello, mawburn, and thank you for your suggestion.
No, I wasn’t going for the full-width fluid layout. The idea was to have the parent menu items fill the width of the container it resides.
Thank you for your suggestion. I’m still trying to work it out.
Thank you, castelinokelvin:
This suggestion would work, with the exception of the menu item used as an image. I’m sure I’ll have to fiddle with that one a little more to make it right.
Thank you!
The problem is that .container in bootstrap assigns widths at multiple levels (for responsive use.)
I’m questioning whether you even need the .container element at all. All it is doing is setting a width and centering it. You don’t want the width nor do you want it centered (you want full width.)
I recommend removing the .container element (keep the children though.)
If I remove the width (e.g. same as removing the element which I recommend.) I get this look. I assume this is what you want?
If it is, then I would probably set those navigation elements to text-align:center; to more evenly balance it out.
Any way to force the parent items to center? They seem to be aligned left…
Set text-align:left on all the <li>'s and then for BOTH the anchor and span, set width:100% on it (not sure why you have it set up that they are floated but since htey are, you can just set width:100%
Edit-Hours late and the OP has already figured out what I meant, but I meant to say text-align:center. Randomly read through this thread and saw the mistake.
Well I’ve done the following, and it worked beautifully:
.dj-main li.dj-up {
text-align: center;
}
.dj-main li a.dj-up_a, .dj-main li a.dj-up_a span {
width: 100%
}
Thank you for your wonderful assistance, RyanReese.
Glad you were able to get it working toad, good luck with the rest of your website.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
