Community Forums › Forums › Archived Forums › Design Tips and Tricks › LANDSCAPE – Nav submenu width change in stylesheet.css?
- This topic has 15 replies, 4 voices, and was last updated 11 years, 3 months ago by nickthegeek.
-
AuthorPosts
-
November 25, 2012 at 4:31 pm #1634EclipsedMember
I have a sub category that is listed from a horizontal menu under the header. The sub category is Antelope Canyon Pictures and it shows Antelope Canyon on one row and Pictures on row below it. Does anyone know what needs to be changed to display it one one row?
Thanks in advance.
November 25, 2012 at 6:30 pm #1646SoZoMemberIt helps immensely if you include a link to your site with all questions.
John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography
November 26, 2012 at 12:36 pm #1729November 28, 2012 at 11:03 am #2046SoZoMemberYou can adjust the widths of #nav li ul and #nav li li a, #nav li li a:link, #nav li li a:visited
I recommend installing the Firebug add on for Firefox or using Chrome's Firebug Lite which will enable you to right click on any element to inspect it and determine the associated style rules or the selectors required to create new style rules.
John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography
November 28, 2012 at 2:22 pm #2102EclipsedMemberThanks, that worked. What option is controlling the position of the secondary sub menu? I want to move it 10 pixels or so to the right becaues right now it overlaps on the first menu.
November 28, 2012 at 4:48 pm #2159SoZoMemberThat margin is set in the #nav li ul ul rule. Firebug will show you all of the rules for any element.
John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography
November 29, 2012 at 9:26 am #2276EclipsedMemberThanks, will have to give Firebug a shot. I've heard of it before but havent used it.
November 29, 2012 at 10:18 am #2307EclipsedMember#nav li ul ul {
margin: -29px 0 0 173px;
}
I tried adjusting both numbers in both directions (increasing and decreasing pixels) but it didnt do anything. The sub menu still shows up the same.
December 2, 2012 at 12:38 pm #2882rolandooooParticipantHello SozO and eclipsed, I tried to change the width in #nav li ul and #nav li li a, #nav li li a:link, #nav li li a:visited and also in
#nav li ul ul { margin: -29px 0 0 173px; } But there are no changes. What I want is only to change the width of the submenu.
Because I have long names.
---------------------------------------------------------------------
What I need is:
Category One
Subpage 1 with long title with long title with long title
Another subpage 2 with long title with long title with long title
Another subpage 3 with long title with long title with long title
-----------------------------------------
What I have is:
and what I dont want is:
Category One
Subpage 1 with long
title with long title
with long title
Another subpage 2
with long title with
long title with long title
Another subpage 3
with long title with
long title with long title
-----------------------------------------------------------
Thanks
There are any .css to change this ?
Roland
December 2, 2012 at 12:44 pm #2885rolandooooParticipantThank you I dont know why today it works.
December 2, 2012 at 1:25 pm #2892SoZoMemberDecember 3, 2012 at 9:22 am #2994EclipsedMemberSozo,
My issue is still not resolved
December 3, 2012 at 2:04 pm #3104rolandooooParticipantthat works
.menu-primary li li a,
.menu-primary li li a:link,
.menu-primary li li a:visited,
.menu-secondary li li a,
.menu-secondary li li a:link,
.menu-secondary li li a:visited,
#header .menu li li a,
#header .menu li li a:link,
#header .menu li li a:visited {
background: none;
background-color: #FF9900;
border-bottom: 1px solid #f5f5f5;
color: #333;
font-size: 15px;
padding: 10px;
position: relative;
text-transform: none;
width: 450px;
}December 3, 2012 at 2:17 pm #3111EclipsedMemberRoland,
Your code is different from what Sozo told me needs to be modified in order for secondary menus to be different.
In your case to get it working did you change the width in your code? What did you change it from?
December 4, 2012 at 6:43 pm #3373rolandooooParticipantok my question was how to change the width of the subnavigation. I only changed the width to 450px.
December 4, 2012 at 8:14 pm #3380nickthegeekMemberyou would change this width to 1000px but it ends up making the menu kind of unusable.
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 200px;
margin: 0;
padding: 0;
} -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.