Community Forums › Forums › Archived Forums › Design Tips and Tricks › horizontal line
- This topic has 5 replies, 3 voices, and was last updated 9 years, 9 months ago by David Chu.
-
AuthorPosts
-
July 16, 2014 at 7:54 pm #114589jenm978Member
Hey everyone,
My site is http://designingindigital.com/beehappy/
I'd like a horizontal line between my primary nav and my secondary nav. I'd like it to be as wide as the browser window, kind of like this site: http://ecoliteracy.org/
How do I do that?Here's the CSS I'm currently using for the primary (top) nav :
#nav .menu-primary {
float: right;
border-bottom: 1px solid #333333;
}The problem I'm having is when I extend the width of the border to say 2000px in order to span the width of the browser window, it also takes the nav items with it. For some reason my float right isn't working either.
Can someone please help me?
thank you!
July 16, 2014 at 9:04 pm #114595Victor FontModeratorI see the issue. You have the float: right in #nav .menu-primary, but the menu pads themselves are float: left in .genesis-nav-menu li. If you change that float to right for the list elements it will also affect your secondary nav and you will see a very strange after effect. The menu items will reverse themselves in the display. If you're going to fix this, you'll need to create a custom markup wrapper to float all the elements of the primary nav right and leave the secondary nav as you want it. Also, to correct the issue with the li items reversing order, you'll have to change the primary nav so the menu items are in reverse order. Floating them right will then display them correctly.
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?July 17, 2014 at 6:29 am #114624jenm978MemberThanks Victor!
What about the horizontal line? Do you see any way for me to accomplish that between the primary and secondary navs?July 17, 2014 at 6:33 am #114625Victor FontModeratorI tested this using the built-in Firefox Inspect Element tool. I set the primary nav to width 100% and the border-bottom will extend across the page like you want.
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?July 17, 2014 at 6:53 am #114629jenm978MemberThanks again, Victor.
I used the Chrome inspect element and added a width of 100%. I got the line to extend, but not the entire window width.
I added this to my CSS and got no results at all:
#nav .menu-primary {
float: right;
border-bottom: 1px solid #333333;
width: 100%;
font-size: 9pt;
font-color: #333;
font-family: "verdana"
width: 100%
}July 17, 2014 at 10:16 am #114668David ChuParticipantHi,
It looks like you're trying to have your cake and eat it, too. ๐ It always takes some re-organization to have some items on a page that go all the way across, and some that don't. This bit of code prevents "anything" from going all the way across.body { margin: 0px 250px 0px 250px; }
To have some things going all the way across, you essentially need to start with a full width layout, and then slim down individual sections. You also have these items which prevent anything from going all the way across:
.site-inner, .wrap { margin: 0 auto; max-width: 1200px; }
Getting all that to happen will be a bit tedious, because you may need to re-space just about everything. It doesn't take that long for a CSS hacker, but would be a fair amount of work if you're not.
Dave
Dave Chu ยท Custom WordPress Developer – likes collaborating with Designers
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.