Wordpress active menu item css I have When a menu item is active I am using the tag li. You want the color to be unique to each menu item. Javascript Menu Highlighter. EDIT: I have updated Answer with full thing that you need. Ask Question Asked 12 years, 4 months ago. Even though that is the path. nav. Thusly, you can simply add a CSS rule to achieve your goal. The main trouble is that hover works default mode works but when it's active and you are locating on that specific page active color doesn't work. Filter nav_menu_item_title. current-menu-item" and if you want to change it's name to let`s say ". I want to highlight the current menu you have click. If that is the case I would suggest using the CSS code below. After that, slightly drag it (that you want to make sub-menu) to the right side. current-menu-item to menu items when you are on that page. navbar-nav > li:not(. In order to link to a category instead of a wp-pag e I am using the plugin "Page Links To" which allows me add a link instead of a page to the menu. active) > a:focus {background-color:inherit !important;color: #4c3d3d !important;} I have a WordPress menu with a dropdown. Then open "Screen Options" and make sure "CSS Classes" is checked. jltma-nav-menu__main-item-text {color: #f4205b;} Thank You . Where I have put 'menu-item-299', change it to the id of your menu item that you want to keep highlighted. 2. if you have a default WordPress menu the active class in it is called ". sidr-class-dropdown-menu li. I have a custom menu item in this menu that goes to a non-standard wordpress page. I need to apply a small background image behind the menu item text to the "active" or "current" menu item. The theme is wonderful and it works great so congratulations!. However, I . PHP Collective Join the discussion. However, when one does that, the menu items isn’t marked active. what I have done in the past is Wordpress: CSS keeping menu item active when inside child pages. I have a navbar which underlines the menu item you hover with a fade in, fade out-effect from the middle, but how can I keep an active menu item underlined with the I am trying to add a different color to my active menu items. Check the box for CSS Classes to enable the option. active > a > . On my website, I wanted the “Blog” menu item to be marked active any time you’re in the blog (blog homepage, category archive, single post). Thereafter, you will see that it will automatically become a sub-menu item. current_page_item a { color: #5fffea; } I used the web inspector built into my browser to find the relevant CSS. Therefore both links will show as active. active class. Weird. How to display specific css styles wp_nav_menu() 0. Please paste the following CSS code and it will work. WordPress adds a class of . li. no-responsive li. About; Products OverflowAI; How to add an active class to a Wordpress menu item when the page is not a child of that menu item? You wont need that PHP code to style links to the current page in your nav. I would like to add a border bottom to my menu navigation button that is hovered over, or selected, or the current menu item. menu-item-active { padding-top: 21px; padding-bottom: 21px; } I guess there should be some CSS selector pointing to an active menu item (IIRC there always has been such a selector in WP menus?) but I am unable to find it. I would like to do is set the dropdown to active when one of the sub-menu items is clicked. You can add a rule to the theme's CSS ( typically /wp-content/themes/your_theme/style. Follow edited Mar 12, 2013 at 11:07. active a { color: #4d4d4d !important; } Otherwise, you can use the current-menu-item class instead. 51 When inside menu item child menu item is no longer active. here is my css code: #sub-header ul li:hover{ background-color: #000;} #sub-header ul li:hover a Highlight active menu item with CSS only. (First of all, I'm not a novice WordPress user, but I have experience in CSS) If you want something along the lines of this: Preview. Open Screen Options by With manual menus you may need to add a CSS class to the current menu item that is active, below is a jQuery solution, that utilizes the URL of the page to match the link and add the CSS. Step 3 – Click on the menu item that needs to be highlighted. First, head over to the Appearance » Editor page from the WordPress admin dashboard. Either track down the style that is overwriting the color (using your browsers inspector) and change it there (but you need to confirm that it is safe to do so, as that style might be affecting other parts of div. selected_page to set the color of the menu item to blue. . Expand the menu item where you want to add a custom CSS class. lmm-navbar-nav > . On your WordPress dashboard, navigate to Appearance -> Customize. Then you can use the handy class css tags added automatically bu wordpress, indicating the parent active page and the current active page (such as current-menu-item, current_page_item etc). g. See the screenshot below. But once the user clicks on the post itself, WordPress does not link it to the parent. This question is in a collective: a subcommunity defined by Add an active class on menu item when on the page (Wordpress) 0. css ) to style the link differently. But sometimes you might want a menu item marked active in other instances. . I'm trying this in jQuery. menu li ul { display:none; } div. How to add “active” class to current menu item in WordPress. If not, then try this custom CSS code: #primary-menu. Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers; Advertising & Talent Reach devs & technologists worldwide about your product, service or employer brand; OverflowAI GenAI features for Teams; OverflowAPI Train & fine-tune LLMs; Labs The future of collective knowledge sharing; About the company I've used the below code to add the active class to menu items. jltma-nav-menu__item-active span. – add underline for the current menu item – remove underline of menu item on hover, and add greying out of menu item on hover – remove the underline on the site title (I would still like it to link to the home page). I have CSS code to underline the selected menu item when it is active. how can I style this? I was thinking something like: Normal menu item: ul. It happens after you clicked on the menu item or link. wp-block Go to Appearance > Menus in the WordPress admin area. Default 'menu_order'. css; wordpress; or ask your own question. To fix your problem you have to create a class and add it manually to the current page's menu: I am building a site in Wordpress using Starkers theme. The page I need help with: [log in to see the link] You want the active menu item to display in a certain color. Add the following class in your CSS. I have tried a few different ways but, active in CSS like this: menu ul a:active, menu ul span:active { color: #ff0000; } change wordpress navigation item menu background color on active. I am working on Twenty Twenty-Three theme, Gutenberg and my menu (Advanced Navigation) links lead to anchors (it’s a one-page layout). I started writing some CSS for the menu but it underlines every menu item. I'm really new to HTML and CSS. is there any other hooks has to work with this plugin. WordPress adds a class (current-menu-item) by default on links to the current page. Setting "active" on drop down submenu. I already searched the internet, but couldn't find a solution that works. If you are using a block-enabled theme, then you’ll have the Full Site Editor instead of the older Theme Customizer. 0. I have done several pages without problems but now I need to make a landing page and need that the active menu items (which are anchors) to be highlighted when going down to the corresponding section whether you click on the item or if you scroll to the section. So if you were on the page for that parent menu item, or one of its children, it would keep that submenu displayed unless you hovered over another parent menu item. Try adding this to prevent making the link active on focus,. current-menu-item a:active{ border-style: solid; border-bottom: thick solid #27CCC0; } Hope this helps. current-menu-item: Class added to the menu item for the current page being viewed by the user. function wpse_nav_menu_css_class( array $classes, $item, $args, $depth ) { if( To add the active class to the current menu item, we can leverage the powerful nav_menu_css_class filter hook provided by WordPress. Get WordPress But if still you want to do it via CSS. Step 1 – From the WordPress dashboard navigate to Appearance > Menus. In Wordpress (3. Hot Network Questions Ways to travel across land when there are biological landmines covering 70% of the earths surface hello, is there any way to give active class on the menu if we are in the custom post type single page? default WordPress menu has that option by adding hook. Dynamic menu active not working? (if condition not working ) 0. current-page-ancestor: Class added to menu item for the parent page if a child page is currently being viewed. Improve this question. Where I have 'bonsai' change it to your custom post type. main-menu ul li a: Targets the links within the menu items. The Problem is actually a CSS issue - because the CSS is more specific if an ID of an element is Once you’ve assigned CSS classes to your menu items, head back to the main menu in the Theme Customizer. So the following code works to get the current parent menu item active ('nav_menu_css_class' , 'special_nav_class' , 10 , 2); function . php : The CSS :active state means the active state of the clicked link - the moment when you clicked on it, but not released the mouse button yet, for example. It is called when the menu is printed. dropdown a { text-decoration : none; css; wordpress; Share. main-navigation . I need this in order to use . The page I need help with: [log in to see the link] When I hover over a menu item, how can I get a underline effect, like on this website: https: I know hot to add css to Wordpress, but I have no idea how to add or adjust html in Wordpress. But the question is how you can add a sub-menu item in a WordPress navigation menu. Christoph. color: Sets the text color. This will direct you to the full site editor. Qtip didn't If whatever tool you used to create the menus has design options to set the paddings, then tweak the paddings as described above: basically, take from elsewhere and give where needed. How do I make menu retain hover state when submenu is active? Hot Network Questions The coherence of physicalism: are there any solutions to 1. main-menu li:hover: Targets a menu item when you hover over it. Supply an orderby field via 'output_key' to affect the output order of nav menu items. Modified 12 years, You can use the nav_menu_css_class in Wordpress to achieve the result you're after. Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers; Advertising & Talent Reach devs & technologists worldwide about your product, service or employer brand; OverflowAI GenAI features for Teams; OverflowAPI Train & fine-tune LLMs; Labs The future of collective knowledge sharing; About the company Visit the blog Wordpress style active menu item on custom menu. How to keep active menu item underlined? 0. wp-block-navigation a:where(:not(. let’s see; In your navigation menu structure, you have to drag the menu item just below the parent item. Joomla 3 menu active state not working. This topic was modified 2 years, 5 months ago by Robbie. window. 0. Unfortunately I wasn’t able to verify with your menu structure, but usually it should be sth like:. I'm using a slightly modified version of this script in a single-page Wordpress site: Change Active Menu Item on Page Scroll? All I changed was the menu UL id, the but yeah, it works. current-menu-item a { color: #4d4d4d !important; } Logic escapes me for two days on what I'm trying to achieve, which is targeting certain class elements in the wordpress menu with CSS. In the Customizer I’ve set the text colour to turn to a shade of yellow for the active state. lmm-item-content Secondly, we must highlight the nav items which correspond to the currently viewed page. I've added book-table class for the last menu item and tried to customize it. How to change active class of menu when page scrolls using id. When I put in this bit of css ul#menu-menu-1. I got this to work for me, taken and edited from, here. current-menu-item > ul { display:block; } How do I make the submenu items show up on both the top level page when its active, and on all the sub menu pages as well (the ballroom, tropicana showroom, grand exhibition center, havana tower Even if you scroll up, the focus remains there. Reason: Moved to Fixing WordPress, this is not an Developing with WordPress topic Wordpress gives the currently active menu item the class . If you add the following CSS to your custom CSS you should get a different color. current_menu_item > a { background color: transparent; color: #000 !important; } If Are you talking about when you are on a page, you want that menu item to be highlighted in a different color? If so, we have to use the current page item class like this: . The class you need is current-menu-item just give that a border-bottom. all . Wordpress: CSS keeping menu item active when inside child pages. Try giving: current-menu-item is the active menu link. current-menu-item a{ color: #ffd696; background: #632818; } . I have a menu in WordPress site with 4 items - Home - Portfolio - Team - Connect. current-menu-item { border-bottom: 1px solid #ff0000; } You probably want to add . Link still underlined. active class instead of the default . Make sure you add Go to Appearance > Menus in your WordPress dashboard. Another way is to use nav_menu_item_title filter and surround the first Normally WordPress puts you in a class called active to determine that the menu item is the one that is current_page_item, it should work:. "Screen Options" is the tab in the very top right corner of your admin screen. fl-page-nav-wrap . To do this you'd need to override the styling rule that applies color and and background-color. background-color: Sets the background color. So here's my straightforward question: How do I change the text color/background of the active submenu? With active, I mean the submenu page is where I How to Highlight Menu Items by Adding a Different Background Color. current-menu-item. I understand that I need the active page to have the current-menu-item class but for some reason the wrong page is being given that class. So something like. Here is what I have (extra stuff comes from WP so please scroll to the right): Yes, there is, but you need to add custom CSS (I use a plugin). I've tested the rule below in firebug on your website and it seems to work fine Background image not showing with highlight on menu active item in wordpress. location. org. Hi there. Then, to style the active class,. The below code works with almost all items except when being active on a product sub-category. main-navigation, #primary-menu . Viewing 1 replies (of 1 total) The topic ‘Active menu item not working (Navigation Menu)’ is Please try to add the below CSS code from the Appearance > Customize > Custom CSS, and check. That means that, if a user is at “Home” we should highlight the “Home” item, and if a user is viewing “Article #1” the menu should highlight all its ancestors up to and including “Blog”. current-menu-item a to the color and style you want. But the text colour stays white as before when clicking a menu item. But it sounds to me that your color style might be being overwritten due to style specificity. Right now I have You could just override the css, so that the nav links don't get re-styled when their parent has the . Step 2 – Click on Screen Options and tick the CSS Classes checkbox. Then open the menu item that you wish to add the class to and type your class name in the "CSS Classes" input. Blending Foundation's Tabs with Wordpress Nav Menu & Display Active Tab. current-menu-item > a { color: #F00; }. I reversed the menu order in Wordpress then used CSS to float the other way. navbar-default . You will have to set #menuwrap ul li. nav-menu . (function($){ $(function() Categorized CSS, Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers; Advertising & Talent Reach devs & technologists worldwide about your product, service or employer brand; OverflowAI GenAI features for Teams; OverflowAPI Train & fine-tune LLMs; Labs The future of collective knowledge sharing; About the company Field to order menu items by as retrieved from get_posts(). 1. Hot Network Questions Can we obtain the power set of a finite set without the Axiom of Power Set? How to add background color to the active menu item with css (ie when I click on about link and go to about page I want that active menu item have red background)? This is my code in Wordpress: By default, WordPress menus output this class with the list item: The absolute positioning approach should work, you need to put the arrow inside of another div that has position:relative defined, so that the absolute coordinates are relative to this parent div, instead of being relative to the body element. CSS Active menu item not working? 0. It’s not a hovering effect. ~ Example: if you are on the “about” page and there is a link to the “about” page then it will inherit this class. I really need assistance in a WordPress project I'm working on. First, we will add the CSS snippet to the WordPress Customizer CSS editor. If you use a block theme, you can read our article here to learn how to enable theme customizer in a block theme. For example if I visit home page the Home menu item should be green. nav li. I would like to have the active main-menu-item to stay blue when it is active. but that hook is not working with this plugin. I dont' just want to add a "text-decoration:underline", I would like to have a 3px tall border and only have it the width of the nav item above it, I can't find an example that applies - any help is greatly appreciated: If you just want to add the current_page_item class to one menu item, you could hook up to the nav_menu_css_class filter, and add that class if needed. I like the second option, that is more flexible. current-menu-item class is added to most WordPress temlates navigation menus by default and it is what we use to target active / selected menus. In the example from my previous reply, if you add that bigtextmenu CSS name class to an individual menu item, only that menu item should be affected by the custom styles. Place the class “pa-active-menu-item” in the CSS Class input field. We don't know enough of your setup to know what the exact problem is. you would need to add some custom css for this. navbar-nav > li. Wordpress style active menu item on custom menu. When you select the sub menu item, word-press automatically add this class to the relevant parent. menu li. CSS ::first-letter. What I am needing to do is make each of the main nav links to change color when on their page and for the parent of the sub menu to be a different color when on their pages. When a sub menu item is chosen (for now, there is only one sub menu item, called Physical Wellness, there will be many) I would like Course Content to remain highlighted. This problem is really consuming too much of my time and I couldn't seem to get the right CSS code for it. I have a typical CSS top navigation which displays a submenu when you roll over the different parent menu items. I am also using Woocommerce. How make my menu active class. Can you help me? Method 1: Highlighting a Menu Item Using Full Site Editor. If you click on any menu or submenu item or link on a site with this theme, the clicked element’s background changes to white as long as you hold mouse button pushed. If the styling is being applied to all the items in the menu, it might be the case that you added the CSS class name to the Navigation Block itself (as opposed to a single item). The following css code should do the trick. Note: The ::first-letter selector can only be used with block-level elements. For example, on my site, I have a parent menu item called Course Content. have Services as pages and Tax, Corporate etc as subpages. I want to highlight menu item of current page being visited but each page should have different color. Common CSS Properties for Menus. It extends default active link color which is for other menu items. How to add active class to separate page link? 4. Open Screen Options by clicking the dropdown in the top-right corner. current I am using a CSS menu that is provided by the WPML package. current-menu-item a:before, nav a:active:before, nav a:focus:before { transform: scaleX(1); } This would trigger default style that you have for hover state. Stack Overflow. With manual menus you may need to add a CSS class to the current menu item that is active, below is a jQuery solution, that utilizes the URL of the page to match the link and add the CSS. Go to Appearance > Menus in your WordPress dashboard. It is usually simple really for me, but something (small usually) is making me battle. sidr-class-current-menu-item a { color: #005cff !important; } PS- Change the color code according to need. Hi @hikinmike – your response here was just what I was looking for as well, so thanks for that. Hi @junior! You can add some additional css for this. active class from Bootstrap. menu-item. I have used html to code the main and sub navigations and styled in css. Enter the class name in the “CSS Classes (optional)” field (e. One of the pages is having submenus; I want to style it such that if I click on a submenu, both the parent menu and the clicked submenu take on the styling. menu-item and similar classes? 1. Step 4 – Add CSS class to the menu item and save the changes in the menu. For the static home page, I If you want to use the active class on the current page, you can use the nav_menu_css_class filter to add to the nav menu classes. com Forums Active Page Highlights Parent and Child Sub-Menus Active Page Highlights Parent and Child Sub-Menus gwasicki2 · Member · Dec 6, 2017 at 3:16 pm Copy link Add topic to favorites I am creating a site for my company and I am having an issue with the highlighting of my menus. I would like to modify wp_nav_menu so that it assigns the current menu item . Active sub menus in Wordpress CSS. Auto Scroll Page + Close Sidebar After menu item select + Link Menu item with Section Ids(Wordpress - Jquery) 0. php" and add this to it: Now, I wonder if someone knows how I would apply this to the parent of an active subpage. current_page_item. It doesn't know which page you're on and can't apply any styles to the menu items. – en WordPress. e. It looks like this rule is affecting color:. There are different CSS properties for editing different aspects of a menu. Custom CSS for particular Wordpress Menu Item. The site is 99% Ecomm using Woocommerce and I'm using product categories as top level navigation items. Search in WordPress. If yes I recommend you to organize these pages according to the wordpress structure, i. However, you can also use custom CSS if you wish to have a different color to your hover color. I'm using CSS, but it is now working. This hook allows us to modify the If you want to format a specific menu item on your website in a different way and want to a CSS class to that specific item, this is how you could do that. Add The CSS Snippet To Your the highlight still works. 1), if I use the GUI to update the Main Menu to include an item called News: ** URL: /news/ Navigation Label: News Title Attribute: news ** the News item shows up in my menu. nav-pills > . If I visit portfolio page then portfolio menu item should be green. For example : li. Then, click on ‘Additional CSS. Wondering if you might have thoughts on a weird issue I’m having where only 3 of my 6 nav items are responding to the additional css active color instructions. hash places active class on current anchor rather than nav anchor. Register Custom menu in wordpress. custom-sidebar . To address a specific menu item in your stylesheet you can either use its id attribute (here: li#menu-item-230) or add a CSS class. current-menu-item a{ border: 1px solid red; /* this is your border */ } The . mobmenu-content li a:active { color: /*your color*/; } Code goes into CustomCSS in I'm trying to edit a menu in wordpress but I can't seem to give the current page menu item the background colour that I want (highlight effect). You can easily highlight a current menu item in it as well. The first option is selector CSS::first-letter. active a::first-letter { color: red; } The a tag inside menu should have display: block / display: inline-block. Here is the code: This will also style the current menu/page item as well. For some reason the active class in the menu works fine for each web I'm using the standard Wordpress menu system. Let's tackle each task individually, it may help you understand what is required better. I was wondering if it’s possible to customize the current menu item in this I would simply like to add an underline to the currently active menu in the navigation to help the user know which 11 months, 1 week ago. current_page_item > ul, . If you look at the html you will see a large number of classes. My CSS. Hi @vadimdude I am not very sure but it sounds like you want to know how to make changes to an active or current menu item. I’m working with a web site project that needs specific CSS design including a menu that has #99CC66 colored underlining on active items. (Note the hyphens and not underscores). color: #365ABA !important; Of course, change the color code to your desired color. active" find the file called "functions. #lmm. Change color of active item in navigation menu including submenus Resolved krischan941 (@krischan941) 2 years, 7 months ago Like I try to get a highlighted menu item when I’m on the correspon ul. This works for both root level menu items and sub-menu items. current_page_item a{ text-decoration:underline; background:#666; } I tried finding the exact class/id of my menu with Firebug and inspectors, because I suspect it might be the problem, and I tried countless solutions without success. wp-element-button)):active { text-decoration: none; } You can replace the line text-decoration: none; with your custom CSS code. Sample code for your theme’s functions. And since you reached top, Home menu will get the class active. I managed to change the active menu item text color by tweaking Astra’s settings but underlining is only on hover. Add active class to a menu link with WordPress. How can I change the code to keep the active submenu displayed. fl-page-nav-right . ’ Here, you can add custom CSS code to style your navigation menu. Add `active` class to li of current single page wordpress. , test). Once the CSS class is added you can add CSS with respect to this class. Is there a way I can conditionally set this nav it Custom active menu item in wordpress menu. font-size: Controls the font size. Would love to know why that happened. How do I give a Permanent color to my active menu item in Wordpress so that when a Sub-Menu Item is selected then its Parent menu is highlighted with the color #f00. css; wordpress; menu; styles; menuitem; or ask your own question. Skip to main content. wp_nav_menu() not adding . current-menu-item a, nav a:active, nav a:focus { color: #406639 !important; } li. This topic was modified 2 years, 5 months ago by Jan Dembowski. how to Show underline in anchor if having href using css. bsvg zgar xnfuh umepcr jyddfe izedgs htspri jsscbe mcucqg ycqzm