• 0
Sign in to follow this  
Followers 0

CSS for secondnav

Question

Posted · Report post

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

9 answers to this question

  • 0

Posted · Report post

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].

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
    • 0

    Posted · Report post

    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

    Share this post


    Link to post
    Share on other sites
    • 0

    Posted · Report post

    Thank you Catrina.

    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  
    Followers 0