Navigation CSS

[myohanan 0]

If someone has a second, could they help with some CSS? I can't figure out how to remove the boxes, hover boxes and hover colors of my navigation bar in the header of my site. I think most of these things were standard in Platform Pro. http://test.questarentertainment.com/

[Jenny 33]

With PageLines Customize or child theme activated, add the following CSS: [code].main-nav .current-page-ancestor a, .main-nav li.current-page-ancestor ul a, .main-nav li.current_page_item a, .main-nav li.current-menu-item a, .sf-menu li li, .sf-menu li li li { background: none repeat scroll 0 0 transparent; }[/code] For hover, use the same CSS, except copy/paste and change every "a" to "a:hover". Hopefully that works!

[myohanan 0]

Thanks Mama, but it doesn't seem to work. I've tried everything! I tried placing it in the customize plugin, in the custom code section and in the customize plugin with !important. Any ideas on what I might be doing wrong? Thank you for your help!

[kastelic 6]

How did you get it to the current set of colors and background colors?

[myohanan 0]

I change the background of the #header and #features areas. And then also put these codes in based on firebug: [code]#page .wp-pagenavi span.pages, .main_nav a, #subnav_row li a, #page .wp-pagenavi a, #page .wp-pagenav .current, #page .wp-pagenavi .extend { color: white; text-shadow: none; } .main_nav .current-menu-item a, .main_nav li a:hover { color: #4072a1; background: none; text-shadow: none; } .main-nav .current-page-ancestor a, .main-nav li.current-page-ancestor ul a, .main-nav li.current_page_item a, .main-nav li.current-menu-item a, .sf-menu li li, .sf-menu li li li { background: transparent; } #nav.container div.texture div.content div.content-pad div.navigation_wrap { border: none; } [/code]

[catrina 103]

Try this code instead: [code]ul.main_nav li.menu-item a:hover {background-color: none;}[/code]

[myohanan 0]

Nope :( No luck! [code]#carousel .content ul li a span.list-title { color: white; text-shadow: black 0 -1px 0; background: rgba(0, 0, 0, .9); font-family: cambria; font-size: 12px; opacity: 0.8; line-height: 1.4em; position: absolute; width: 100%; right: 0; bottom: 1px; } #carousel .content ul li a img, #carousel .content ul li a:hover img { background: none; box-shadow: transparent; } #list_featuredvideos_contentsidebar.sidebar_widgets li#wdg_specialrecentposts-3.Special div.widget-pad h3.widget-title { font-size: 35px; color: black; border-bottom: 2px solid black; } html body.home div#site.one-sidebar-right div#page.thepage div.page-canvas div#page-main.container-group div#dynamic-content.outline section#content.container div.texture div.content div.content-pad div#pagelines_content.one-sidebar-right div#column-wrap.fix div#column-main.mcolumn div.mcolumn-pad section#featuredvideos_contentsidebar.copy div.copy-pad ul#list_featuredvideos_contentsidebar.sidebar_widgets { position: relative; bottom: 24px; } #latestnews_sidebar.copy div.copy-pad ul#list_latestnews_sidebar.sidebar_widgets li#advanced-recent-posts-3.advanced_recent_posts_widget div.widget-pad h3.widget-title { font-size: 35px; color: black; } #sb_secondary { position: relative; top: 22px; font-size: 25px; font-family: anton; text-transform: uppercase; line-height: 45px; height: 145px; border-left: 2px solid black; padding: 10px 10px 10px; } #employee_sidebar.copy { position: relative; width: 300px; left: 167px; top: 20px; } html body.page div#site.one-sidebar-right div#page.thepage div.page-canvas div#page-main.container-group div#dynamic-content.outline section#content.container div.texture div.content div.content-pad div#pagelines_content.one-sidebar-right div#column-wrap.fix div#column-main.mcolumn div.mcolumn-pad section#postloop.copy div.copy-pad article#post-2.post-2 div.hentry-pad div.entry_wrap div.entry_content { width: 600px; } #googlemap_sidebar { position: relative; top: 40px; height: 550px; } #footcols.container div.texture div.content div.content-pad div.fcolumns div.fcolumns-pad div#text-4.widget_text div.footcol-pad div.textwidget { position: relative; bottom: 29px; } #footer { background: #E4E4E4; }[/code] This is all my custom code, including the things I tried that didn't work.

[myohanan 0]

whoops, forgot the top half, [code]#header { margin-top: -170px; background: #191919; } #features { background: #191919; height: 460px } #feature_slider { height: 400px; } form.gsc-search-box { width: 30% !important; position: relative; left:659px; z-index: 1000 } #social-widget-8.Social_Widget { top: 34px; position: relative; z-index: 1001; width: 200px; left: 746px; } #sb_universal { position: relative; top: 190px; } #nav { font-size: 25px; } #page .wp-pagenavi span.pages, .main_nav a, #subnav_row li a, #page .wp-pagenavi a, #page .wp-pagenav .current, #page .wp-pagenavi .extend { color: white; text-shadow: none; } .main_nav .current-menu-item a, .main_nav li a:hover { color: #4072a1; background: none; text-shadow: none; } ul.main_nav li.menu-item a:hover { background-color: none; } .main-nav .current-page-ancestor a, .main-nav li.current-page-ancestor ul a, .main-nav li.current_page_item a, .main-nav li.current-menu-item a, .sf-menu li li, .sf-menu li li li { background: none; } #nav.container div.texture div.content div.content-pad div.navigation_wrap { border: none; }[/code]

[myohanan 0]

Well, I got it for now, but I was never able to set the hover background to none or transparent. Instead I had to match them to the background header color. For this reason, I am going to leave this question open, until we can figure out how to remove the man_nav background and hover background color. Here is my code: [code].main_nav { font-size: 25px; } .main_nav a { color: white; text-shadow: none; } .main-nav .current-page-ancestor a, .main-nav li.current-page-ancestor ul a, .main-nav li.current_page_item a, .main-nav li.current-menu-item a, .sf-menu li li, .sf-menu li li li , .main_nav li a:hover { color: #4072a1; background: none; text-shadow: none; } .main-nav li a:hover, .main-nav .current-menu-ancestor .current_page_item a, .main-nav li.current-menu-ancestor ul a:hover { background-color: transparent !important; } #nav.container div.texture div.content div.content-pad div.navigation_wrap { border: none; } #nav .content-pad, #secondnav .content-pad { background: none repeat scroll 0 0 transparent; } .navigation_wrap { border-bottom: 0 none !important; } .main-nav li a:hover, .main-nav .current-menu-ancestor .current_page_item a, .main-nav li.current-menu-ancestor ul a:hover { background-color: #191919 !important; color: #4072a1; } .main-nav li.current-page-ancestor a, .main-nav li.current_page_item a, .main-nav li.current-page-ancestor ul a, .main-nav li.current_page_item ul a { background: #191919 !important; } .main-nav .current-menu-ancestor a, .main-nav li.current-menu-ancestor ul a, .main-nav li.current_page_item a, .main-nav li.current-menu-item a, .main-nav li.current_page_parent a, .sf-menu li li, .sf-menu li li li { background: none repeat scroll 0 0 #191919 !important; } [/code]

[catrina 103]

Are the first and last selectors here the ones you're using to take away the background color?: [code].main-nav li a:hover, .main-nav .current-menu-ancestor .current_page_item a, .main-nav li.current-menu-ancestor ul a:hover { background-color: transparent !important; }[/code]

[timichango 1]

looks like you need to combine the above selectors with this pesky bugger: .main-nav li:hover{ background: transparent !important; background-color: transparent !important; /*peace of mind*/ } That did the trick for me. Gotta love that by default they're changing both the 'a:hover' and 'li:hover' state, one on top of the other. It was only through playing with setting RGBA values with half-transparency in the a:hover states that I noticed this. Argh.

[davemoppert 6]

Sure would be handy if someone would take some time to create a pagelines plugin for editing the nav css. Using firebug is okay, but it can be a hassle trying to find the right css for the navigation and it seems like this problem is a constant headache when designing new sites. I wish I was knowledgable enough to make the plugin, but I'm not :(

[guerrilla 0]

Enormously frustrated and disappointed. Upgraded to Pagelines Framework and now can't do simple things like style the navigation menu. First, finding the code I need to change is a pain even with Developer Tools and second the changes made in the Custom Code settings are being overwritten. After reading several related posts on problems with styling the Pagelines Framework navigation menu, I finally copied and pasted the recommended code and changed the color to a pure blue. This is the entire Custom Code: [code].main-nav { background: #00cc99; } .main-nav .current-menu-ancestor a, .main-nav li.current-menu-ancestor ul a, .main-nav li.current_page_item a, .main-nav li.current-menu-item a, .main-nav li.current_page_parent a, .sf-menu li li, .sf-menu li li li { background: #0000ff; }[/code] The custom code is then listed as overwritten by this when displayed in the browser: [code].main-nav .current-menu-ancestor a, .main-nav li.current-menu-ancestor ul a, .main-nav li.current_page_item a, .main-nav li.current-menu-item a, .main-nav li.current_page_parent a, .sf-menu li li, .sf-menu li li li { background: #F2F2F2; }[/code] And everything is back to the default grey! Am seriously looking at alternative solutions if I can't modify basic styling easily with custom code...

[guerrilla 0]

I installed the Pagelines Customize Plugin, activated it, cut the code from the Settings > Custom Code and pasted it into the pagelines-customize/style.css file and it seems to take. Same code. I would have thought that the Settings > Custom Code would take precedence over having to generate a stylesheet stored outside of the theme directory, but apparently not.