Community Forums › Forums › Archived Forums › Design Tips and Tricks › menu to take up full width of container
- This topic has 16 replies, 4 voices, and was last updated 10 years ago by dmcleod87.
-
AuthorPosts
-
October 24, 2013 at 7:37 pm #68746dmcleod87Member
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.
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/October 24, 2013 at 8:24 pm #68756emasaiParticipantYou 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.comOctober 24, 2013 at 8:36 pm #68757dmcleod87Memberthanks 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
October 24, 2013 at 8:43 pm #68758AnitaKeymasterLook 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.
Love coffee, chocolate and my Bella!
October 24, 2013 at 10:05 pm #68775dmcleod87Memberthanks 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
October 25, 2013 at 9:49 am #68845emasaiParticipantYes, 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.comOctober 25, 2013 at 7:53 pm #68982dmcleod87Memberi'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!
October 25, 2013 at 8:31 pm #68988emasaiParticipantI 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.comOctober 25, 2013 at 9:35 pm #69003dmcleod87Memberyes 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...
October 26, 2013 at 3:28 pm #69146emasaiParticipantYou 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 aYou 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.comOctober 27, 2013 at 7:20 pm #69361dmcleod87Memberi'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...
October 27, 2013 at 7:38 pm #69364emasaiParticipantEmail me through my website and I'll take a look.
Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.comOctober 27, 2013 at 11:01 pm #69404dmcleod87Memberthanks lynne. have sent you an email
March 16, 2014 at 8:37 am #95132wph2oMemberHey would you guys mind posting your solution here?
Thank you,
Chris
March 16, 2014 at 8:49 am #95135emasaiParticipantSorry, 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.comMarch 16, 2014 at 9:08 am #95148wph2oMemberThis reply has been marked as private.March 16, 2014 at 3:56 pm #95211 -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.