Jump to content


Photo
- - - - -

CSS for secondnav


  • Please log in to reply
9 replies to this topic

#1 alanneese

alanneese

    Newbie

  • Members
  • 9 posts

Posted 14 March 2012 - 04:03 PM

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.

#2 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 14 March 2012 - 04:45 PM

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

Please Login or Register to see this Hidden Content

and check out

Please Login or Register to see this Hidden Content

for more info. Also please be sure to watch our Firebug video tutorial

Please Login or Register to see this Hidden Content

.

If your site requires customization, you may wish to consider requesting a quote from one of our authorized Professional designers by visiting

Please Login or Register to see this Hidden Content

.

#3 alanneese

alanneese

    Newbie

  • Members
  • 9 posts

Posted 14 March 2012 - 04:50 PM

I can do CSS, I just need to know which elements I should be working on in CSS.

#4 alanneese

alanneese

    Newbie

  • Members
  • 9 posts

Posted 14 March 2012 - 07:41 PM

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.

#5 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 14 March 2012 - 08:27 PM

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.

#6 alanneese

alanneese

    Newbie

  • Members
  • 9 posts

Posted 14 March 2012 - 08:43 PM

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.

#7 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 14 March 2012 - 08:59 PM

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.

#8 alanneese

alanneese

    Newbie

  • Members
  • 9 posts

Posted 14 March 2012 - 09:10 PM

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:
  • Please Login or Register to see this Hidden Content

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

    #9 catrina

    catrina

      Advocate

    • Members
    • 12345 posts
    • LocationCalifornia
    • Country: Country Flag

    Posted 15 March 2012 - 02:58 AM

    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

    #10 alanneese

    alanneese

      Newbie

    • Members
    • 9 posts

    Posted 15 March 2012 - 02:01 PM

    Thank you Catrina.