menu to take up full width of container

[dmcleod87]

hi,

i'm trying to get the links of the menu to take up the full length of the wrap/container like in the example below.

http://d.pr/i/t03g

i've played with the css but can't figure it out, the best i can get is about 50px from either end and when i do this the sub menu loses it's alignment to the parent menu.

can anyone point me in the right direction? here is the css http://pastebin.com/6Ly7HaYb

i'm using a modified version of the genesis sample child theme

thanks

http://influencer.dylanmcleod.net.au/

[emasai]

You could use custom css classes for your navigation or nth-child to style each of your links individually.
http://www.w3schools.com/cssref/sel_nth-child.asp

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[dmcleod87]

thanks for the tip emasai.

i found this example code online...would something similar to this work except obviously using padding/margins instead of color?

nav ul li:nth-child(1) a span {
color: #5bb2fc;
}
nav ul li:nth-child(2) a span {
color: #58ebd3;
}
nav ul li:nth-child(3) a span {
color: #ffa659;
}

....etc

[AnitaC]

Look for this:

.genesis-nav-menu a {
border: medium none;
color: #000000;
display: block;
padding: 2.8rem 2.4rem;
position: relative;
}

Change 2.4rem in the padding to 5.4rem. If that's not enough, increase it a little bit.

---

Need help with customization or troubleshooting? Reach out to me.

[dmcleod87]

thanks anitac but i tried that before. still won't fill the entire width as per the screenshot above.

to use the nth-child, is this how I would target each menu item? changing (1) to correspond to the order the option appears?

.nav-primary .genesis-nav-menu ul li:nth-child(1)

i've tried the above with no luck...i'm new to the nth-child selector CSS

[emasai]

Yes, the nav ul li:nth-child(1) a selector would work. However if you don't understand it try putting custom classes on your first and last links in your navigation menu. If the option is not there, go to Screen Options and check CSS classes. Then you can style accordingly.

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[dmcleod87]

i'd completely forgotten about those options in the menu!

ok so i've add custom classes to the first/last menu option-

.nav-primary .wrap .genesis-nav-menu .menu-item .home-menu ul li a {
padding-left: 0px !important;
padding-left: 0rem !important;
}

.nav-primary .wrap .genesis-nav-menu .menu-item .about-town ul li a {
padding-right: 0px !important;
padding-right: 0rem !important;
}

still doesn't do anything...have i targeted them correctly? using Firebug i noticed each menu link had an id eg id=menu-item-15 etc but adding that didn't do anything either. i'm sure i'm missing something easy here!

[emasai]

I am not seeing any custom classes in a web inspector or any styling of individual menu id items. Did you upload the css file?

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[dmcleod87]

yes the classes (home-menu & about-town) appear in web inspector, see screenshot below. that is why i think i am not targeting them correctly in the css...

http://d.pr/i/ghiz

[emasai]

You are targeting the wrong tag
.nav-primary .wrap .genesis-nav-menu .menu-item .home-menu ul li a

.home-menu as per your screen shot is a class of the li tag so you should write your selector
.nav-primary .wrap .genesis-nav-menu .menu-item ul li.home-menu a

You will also have to change the following:
.genesis-nav-menu - to text-align: left;
and
.genesis-nav-menu a - to padding: 2.8rem 6.6rem; (or thereabouts)

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[dmcleod87]

i've changed the selectors and updated text-align...still no luck. changing padding just puts the menu on two lines...so i don't think the selectors are working...

[emasai]

Email me through my website and I'll take a look.

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[dmcleod87]

thanks lynne. have sent you an email

[wph2o]

Hey would you guys mind posting your solution here?

Thank you,

Chris

[emasai]

Sorry, this was months ago and although I got it to work on his website, I really can't remember how. It was a dev site, so unless he comes back with the URL of the working site, you would have to post yours and I will take a look.

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[wph2o]

This reply has been marked as private.

[dmcleod87]

hi chris,

here is the live site, you may be able to use Firebug or Code Inspector to check out the CSS. I can't remember the exact fix that Lynne used.

hope this helps.

[Author]

Posts