Problem customizing menus
-
In the web: https://www.ppspark.com
I’ve customized the top and sidebar menus but I made a mistake and do not work as I would like.In the top menu: For example, if you select from the submenu “work with us” https://www.ppspark.com/en/treballa-amb-nosaltres/ the item “Contact” in the menu superior also changes to red but it should be in dark gray.
And in the sidebar menu: If you select “contact” all elements of this subgroup turn red, but should only change “Contact”
Can you help me?
Thank you very much!!
-
“Contacte” (sidebar) is:
#menu-item-210
Use in CSS to change this item only.
Hello ibogo,
Thanks for your help.
“Contacte” is an example. The problem is in all the elements of the submenús.There is an error in the CSS that I used to customize the menus, but can not find the error to fix it.
This is style.css
/* Theme Name: Customizr_Child Version: 1.0 Description: A child theme of Customizr Template: customizr Author: Administrator */ /* Your awesome customization starts here */ header.tc-header { border-bottom: none; } footer#footer { border-top: none; } .colophon { background: transparent!important; } #footer { background: transparent!important; } /* Centrar menú superior */ .navbar-inner{ padding-right: 0; padding-top: 25px; } .tc-header .nav-collapse{float: none;} .navbar .nav {width: 100%;text-align: center;-webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;} .nav-collapse .nav > li{float: none; display: inline-block;} .nav-collapse .nav > li li{text-align: left;} @media (max-width: 979px){.nav-collapse .nav > li{display: list-item;} } .back-to-top { display: none; } /* START OF Change the Background Color of the 3-Bar Menu dropdown */ /* Change 3-bar Menu background color */ .nav-collapse .nav .nav-header { color: #666666; /* Adjust Text Color Level 1 */ text-shadow: none; } .nav-collapse .nav > li > a, .nav-collapse .dropdown-menu a { font-weight: bold; color: #666666; /* Adjust Text Color Level 2 */ text-shadow: none; } .nav-collapse .nav > li > a, .nav-collapse .nav > li > a, .nav-collapse .dropdown-menu a, .nav-collapse .dropdown-menu a { background-color: transparent; /* Adjust Background Color Level 2 */ font-weight: normal; font-family: Fine Again; font-size: 1.1em; } .nav-collapse .nav > li > a:hover, .nav-collapse .nav > li > a:focus, .nav-collapse .dropdown-menu a:hover, .nav-collapse .dropdown-menu a:focus { color: #000000; background: none !important; } .nav-collapse .dropdown-menu > li.current-menu-item > a, .nav-collapse .dropdown-menu > li.current-menu-ancestor > a { background-color: transparent; /* Adjust Background Color Current Item */ color: #FF0000; /* Adjust Text Color Current Item */ text-decoration: none; } /* END OF Change the Background Color of the 3-Bar Menu dropdown */ /* Adjust Menu text color, font-family, font-size */ .navbar .nav > li > a, .navbar .nav > li > a:first-letter, .navbar .nav > li.current-menu-item > a, .navbar .nav > li.current-menu-ancestor > a { display: inline; color: #FF0000; font-family: Fine Again; font-size: 1.2em; text-shadow: none; font-weight: normal; padding: 5px 11px; } /* Adjust Menu colors - Normal */ .navbar .nav > li > a, .navbar .nav > li > a:first-letter { color: #666666; text-shadow: none; } /* Adjust Menu colors - Hover */ .navbar .nav > li > a:hover, .navbar .nav > li > a:hover:first-letter { color: #000000; text-shadow: none; font-weight: bold; } #main-wrapper .widget li { font-family: Fine Again; line-height: 25px; border-bottom: none!important; text-shadow: none!important; position: relative; } .widget_nav_menu li a { font-size: 1.2em; text-shadow: none!important; color: #666666; } .widget_nav_menu li a:hover { color: #000000; text-decoration: none!important; font-weight: bold; } .widget_nav_menu .current-menu-item a { color: #FF0000; text-shadow: none!important; font-weight: bold; } #main-wrapper .widget li:after { border-bottom: none;} #main-wrapper .widget ul:hover li {background: initial;} .widget.widget_nav_menu li:before { color: #000000;} body { /* Adjust sitewide text color */ color: #000000; /* Adjust sitewide font family */ font-family: trebuchet ms,geneva,sans-serif; /* Adjust sitewide text alignment */ text-align: justify; /* left|right|center|justify */ } /* Center Page Title */ .page h1.entry-title { width: 100%; text-align: right; margin-top: 0px; text-shadow: none; font-size: 2em; } /* START OF Change the Divider Bar */ /* 2px=thickness, solid=style (dotted-dashed-solid-double-groove-ridge-inset-outset), red=color */ .featurette-divider { border: 1px solid black; } /* END OF Change the Divider Bar */ #left.widget-area, #left.widget-area:after { border-right: 0px solid #FAFAFA; } .entry-header .featurette-divider { margin: 6px 0px 16px 0px; } h1 { text-shadow: none; } .tc-header.clearfix{ background: none; } .navbar .navbar-inner { background: none; } .my-extra-widget { max-width: 93%; float: none; margin: 0 auto; } /* Change font-size, alignment as needed */ footer#footer p, footer#footer a { padding: 0px ; font-size: 13px!important; text-align: center; color: #333333!important; line-height: 1em ; } footer#footer { line-height: 1.5; color: #000000!important; font-size: 17px!important; text-align: center; } #footer .footer-widgets a{ color: #000000!important; font-size: 17px!important; } footer#footer h3{color: #000000;} a { color: #333333 ; font-weight: normal; text-decoration: none ; } a:hover { color: #000000 ; font-weight: bold; text-decoration: underline ; } .wpcf7 input[type="tel"], .wpcf7 input[type="number"], .wpcf7 input[type="date"] { background-color: #fff; color: #000; width: 25%; } .wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea {width: 70%;} .wpcf7-submit{ float:left; padding:4px 20px; background:#8Ec4DE!important; color:#333333!important; border:none; font-size:17px; font-weight:bold; cursor:pointer;} .metaslider {margin: 30px auto !important;} .tc-header .brand{display:none;
This is the selector causing that:
.navbar .nav > li.current-menu-ancestor > a (style.css #78)It’s actually tracking the path as you sink down levels of menu. If you don’t want it, try removing it.
Edit: rdellconsulting gives a much better solution above ??
Delete this:
.widget_nav_menu .current-menu-item a { color: #FF0000; text-shadow: none!important; font-weight: bold; }
Try this:
.widget_nav_menu .current-menu-item#menu-item-197 a, .widget_nav_menu .current-menu-item#menu-item-198 a, .widget_nav_menu .current-menu-item#menu-item-202 a, .widget_nav_menu .current-menu-item#menu-item-203 a, .widget_nav_menu .current-menu-item#menu-item-204 a, .widget_nav_menu .current-menu-item#menu-item-205 a, .widget_nav_menu .current-menu-item#menu-item-206 a, .widget_nav_menu .current-menu-item#menu-item-207 a, .widget_nav_menu .current-menu-item#menu-item-208 a, .widget_nav_menu .current-menu-item#menu-item-209 a, .widget_nav_menu .current-menu-item#menu-item-210 a, .widget_nav_menu .current-menu-item#menu-item-213 a, .widget_nav_menu .current-menu-item#menu-item-214 a, { color: #FF0000; text-shadow: none!important; font-weight: bold; }
Thank you very much to both for your help!!
I tried the two solutions that you have provided. but none has worked.
I’ve changed this selector:
/* Adjust Menu text color, font-family, font-size */ .navbar .nav > li > a, .navbar .nav > li > a:first-letter { display: inline; color: #FF0000; font-family: Fine Again; font-size: 1.2em; text-shadow: none; font-weight: normal; padding: 5px 11px; }
@estudl33, offtopic but how did you get the carousel slide thing workin at the top of your site?
Hello,
rdellconsulting, Thanks again for your help.I followed your instructions and I’ve changed those lines of code but there has been no change.
I’m wondering if it would be better to start again, delete all the lines of code that modify the top and sidebar menu and gradually add the codes one by one.
What do you think?
Thank you very much for your help.
Hello memememememe,
The carousel is in an widget area before the header.To create the widget area you must place these snippets in functions.php
// Adds a widget area. if (function_exists('register_sidebar')) { register_sidebar(array( 'name' => 'Extra Header Widget Area', 'id' => 'extra-widget-area', 'description' => 'Extra widget area before the header', 'before_widget' => '<div class="widget my-extra-widget">', 'after_widget' => '</div>', 'before_title' => '<h2>', 'after_title' => '</h2>' )); } // Place the widget area after the header add_action ('__before_header', 'add_my_widget_area', 10); function add_my_widget_area() { if (function_exists('dynamic_sidebar')) { dynamic_sidebar('Extra Header Widget Area'); } }
Gradual building up code is a good way of finding where you’re going wrong, definitely.
@estudl33 Where in functions.php? head or bottom? Im always careful not to mess with that php. Also what happens afterwards? How did you get the picture up, running and sliding? Cheers!
Hello mememememe,
First you should create a child theme:
https://doc.presscustomizr.com/customizr/creating-child-theme-customizr/Then you can add the code to create the widget area in the header in the child theme functions.php file safely.
- The topic ‘Problem customizing menus’ is closed to new replies.