Jump to content
Sign in to follow this  
alanneese

CSS for secondnav

Recommended Posts

alanneese    0
alanneese

I have created a secondary menu called ???services-menu??? in WP. I tied the services-menu to the services page, the remote help page and the Themeforest page. When I click on the remote help page the link stays the same (background coloring and coloring of the item). I??™d like to change the CSS to affect this secondary menu. AifnO.jpg

Share this post


Link to post
Share on other sites
Jenny    33
Jenny
You will need to add a couple CSS elements to make this work like background color and text color. Keep in mind we can't design your site for you so if you need CSS help, make sure you've downloaded [url="http://www.getfirebug.com"]Firebug[/url] and check out [url="http://www.w3schools.com/"]W3 Schools[/url] for more info. Also please be sure to watch our Firebug video tutorial [url="http://www.pagelines.com/wiki/Custom_CSS"]here[/url]. If your site requires customization, you may wish to consider requesting a quote from one of our authorized Professional designers by visiting [url="http://www.pagelines.com/pros/"]our Pros page[/url].

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
alanneese    0
alanneese
I can do CSS, I just need to know which elements I should be working on in CSS.

Share this post


Link to post
Share on other sites
alanneese    0
alanneese
So am I in the wrong place to ask what specific elements need to be tweek'ed in CSS in order to style the secondnav (that in all accounts should have been styled by default by Pagelines)? Why can't someone just tell me what class(es) or elements need to be touched by CSS to do what I want it to do? I don't think I'm asking for a lot here.

Share this post


Link to post
Share on other sites
Rob    547
Rob
If you use Firebug for Firefox you can inspect the secondary nav and find the specific CSS you need to apply changes to. As Jenny quite correctly said, we cannot customize your site here and because sites differ, we can't provide the CSS elements but the tools and guidance to achieve your goals. The secondary nav is in fact styled by PageLines. If you look in Firebug you'll see that styling and can select just what you wish changed, test your changes, then simply copy it from Firebug to your style.css (with PageLines-Customize plugin or CSS Rules in Dashboard > PageLines > Settings > Custom Code.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
alanneese    0
alanneese
The secondary nav is not styled like the main nav. You can't see what page you are currently on based upon the menu links. If you call black text and blue hover links styling (which is the default for most web pages) then yes, it is styled. Again, I'm not asking for anyone to customize my site. Just the CSS element names that the basic PageLines framework uses for the secondary menu. In looking at the forum there are tons of questions like this. One would think that Pagelines could do a better job of documenting things that come up most often, but that's just my thought. Thanks for the great support.

Share this post


Link to post
Share on other sites
Rob    547
Rob
The secondary nav CSS element is #secondnav however, that's not necessarily the element to which you wish to apply changes. Since we can't design your site, and you're capable of dealing with CSS, you simply need to get Firebug for Firefox and hover over the elements you wish to change, identify the proper CSS and apply the changes. I'm unsure why this seems to cause you to reject each answer. We are providing you with the definitive answer because there are several options for the secondary nav. Which one of those you wish to change is completely up to you, not to us, which is why there is basic styling applied to the secondary nav. I'm sorry if you're dissatisfied but the answers we provided were both accurate and truthful.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
alanneese    0
alanneese
I don't need Firebug, I used Dev Tools from Chrome. There are many classes that can relate to one item on a page. The one that I'm looking at has the following:
  • ThemeForest
  • The CSS related to this has: media="all" #secondnav ul li { float: left; } /wordpress/services/themeforest/media="all" html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } user agent stylesheetli { display: list-item; text-align: -webkit-match-parent; } Inherited from ul#menu-services-menu.secondnav_menu.lcolor3 /wordpress/services/themeforest/media="all" #secondnav ul { list-style: none; } /wordpress/services/themeforest/media="all" ol, ul { list-style-type: none; } /wordpress/services/themeforest/media="all" ol, ul { list-style: none; } /wordpress/services/themeforest/media="all" html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { font-size: 100%; } user agent stylesheetul, menu, dir { list-style-type: disc; } Inherited from div.content-pad /wordpress/services/themeforest/media="all" html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { font-size: 100%; } Inherited from div.content /wordpress/services/themeforest/media="all" html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { font-size: 100%; } Inherited from div.texture /wordpress/services/themeforest/media="all" html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { font-size: 100%; } Inherited from section#secondnav.container.fix.nav-secondnav.secondnav-content .font-sub, ul.main-nav, #secondnav, .metabar, .subtext, .subhead, .widget-title, .reply a, .editpage, #page .wp-pagenavi, .post-edit-link, #wp-calendar caption, #wp-calendar thead th, .soapbox-links a, .fancybox, .standard-form .admin-links, .pagelines-blink, .ftitle small { font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; letter-spacing: 0.10em; text-transform: uppercase; } So as you can see it's no easy task to find out which little class or ID to change. That's the only reason why I submitted this question. I never expected you to 'design my site'. Just a little hint of which class or ID to look at.

    Share this post


    Link to post
    Share on other sites
    catrina    103
    catrina
    These are the selectors you'll need to look at: #secondnav ul = For the entire secondary nav row #secondnav ul li = For individual secondary nav link items

    Please read the docs before posting. Please do not private message me unless I ask you to.

    Designer | Catrina Dulay

    Founder | Catrina and Mouse

    Share this post


    Link to post
    Share on other sites

    Create an account or sign in to comment

    You need to be a member in order to leave a comment

    Create an account

    Sign up for a new account in our community. It's easy!

    Register a new account

    Sign in

    Already have an account? Sign in here.

    Sign In Now

    Sign in to follow this  

    ×