Adjust the appearance of primeng's PanelMenu component

I've been attempting to customize the appearance of the PanelMenu component

So far, I've successfully changed the overall background color.

https://i.sstatic.net/MGIia.png

My goal is to set the main menu items to white and the submenus to black

Additionally, when an element is focused, I want to change the color from blue to a different shade

<p-panelMenu [model]="items" [style]="{'width':'100%'}" [multiple]=false></p-panelMenu>

CSS

::ng-deep .ui-panelmenu .ui-widget {
    background-color: #5F5F5F !important;
    font-family: 'BNPPSans'
}
::ng-deep .ui-menuitem-text {
    font-family: 'BNPPSans';
};

I've tried multiple combinations following the documentation but none have yielded results. I can see changes in the dev tools here

https://i.sstatic.net/z1bBR.png

However, when transferring the changes to the CSS file, nothing seems to happen

::ng-deep .ui-panelmenu .ui-panelmenu-header.ui-state-active, .ui-panelmenu .ui-panelmenu-header.ui-state-active a{
    background-color: red !important;
};

Here's a link to the StackBlitz (although there seems to be overlapping items for some reason)

cssangularprimeng

Answer №1

This solution worked like a charm for me!

::ng-deep body .ui-panelmenu .ui-panelmenu-header.ui-state-active > a:hover{
  color: red;
  background-color: red;
}
:host >>>
::ng-deep .ui-panelmenu .ui-panelmenu-header.ui-state-active > a {
  color: red;
  background-color: red;
  border: 1px solid rgb(212, 210, 210); 
}
:host >>>
::ng-deep .ui-panelmenu .ui-panelmenu-header.ui-state-active > a:hover {
  color: red;
  background-color: red;
  border: 1px solid rgb(212, 210, 210); 
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

``Are you looking to optimize your use of PouchDB within an Angular2 and Ionic2 environment

I have been transitioning to Angular 2 (Ionic2) and my application relies on pouchDB. In Angular1, I used var _usersDatabase = pouchDB(CouchConstants.COUCHDB_USERS_DB_NAME); with a lowercase 'pouchDB' and no 'new'. However, the TypeScr ...

angularionic2pouchdb

Issue with Navigation menu dropdown not functioning properly on Angular version 12 with Bootstrap 5

I am attempting to integrate bootstrap with Angular through a CDN. Below is the content of my index.html file: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Laboratorio Sigma< ...

htmlcssangularnavbarbootstrap-5

Using ngFor in Angular to apply a function to a variable

Imagine I have two tables: one for Books and one for Authors. The Author table contains a reference to the ID of a book. In my Angular project, I aim to iterate through the list of Authors and then iterate through the books written by each author: <di ...

angularmean-stack

How can I use JavaScript and HTML to print a canvas that is not within the print boundaries?

As someone who is new to javascript, I recently created a canvas function that allows me to successfully print. However, I am encountering an issue with printing large canvas areas. When I navigate to the further regions of the canvas and try to print, i ...

javascriptcsshtmlcanvasprinting

Adjust the width of the scrollbar for the <aside> section

<aside class="sidenav navbar navbar-vertical navbar-expand-xs border-0 border-radius-xl my-3 fixed-left ms-3" id="sidenav-main"></aside> Within this aside element, I have implemented a scrollbar. However, I am seeking to adjust ...

htmlcsslaravelbootstrap-4

Does the order property in flex have a specific starting and ending point?

I am curious to know if there are specific start or end numbers for ordering elements within a flex container. For instance: .firstOrder { order: <First-Item> } Why do I ask? Well, I am in the process of developing a CSS framework and I would l ...

cssflexbox

Tips for adding a placeholder in a login form on Drupal 7

Can anyone help me set a placeholder for a horizontal login form in Drupal 7? I want the placeholder text to disappear when clicked on, and I want it to display 'username' and 'password'. Here is the current code for the form. Thank you ...

javascriptphpcssformsdrupal-7

What is the best way to connect a boolean to the presence of an attribute in Angular 2?

Can a boolean variable be linked to the presence of an attribute? template: ..., host: { "[attr.disabled]": "disabled" } When rendered in the element, this results in disabled="true" or disabled="false". However, I am looking for a way to utilize i ...

typescriptangular

Accessing the attribute of an element from a custom directive in Angular 2+ is an essential read

I am currently in the process of creating a custom directive that involves reading an attribute (formControlName) from the native element and then potentially adding additional attributes based on certain conditions. However, I encountered an issue when a ...

angularangular2-directives

Help! My HTML/CSS (Bootstrap) text won't center properly. Can anyone assist me?

My text doesn't seem to be centered on the page, despite using the "text-center" class for the caption text. What am I missing here? <div class="text-center"> <h1>Evelyn Lauder </h1> <h5 class="font-italic"> 1936-2011</ ...

htmlcssbootstrap-4

What could be causing the sporadic functionality of my jQuery image resizing code?

Seeking help for an issue I am facing with my jQuery code. I have been trying to scale a group of images proportionally within an image carousel using jCarousel Lite plugin. However, the resizing code seems to work randomly and I can't figure out why. ...

javascriptjquerycssjcarousellite

Angular 6 is experiencing a failure to send the Authorization Header

I have set up an HttpInterceptor to include an Authorization Header Token and I am attempting to handle http errors. However, the Authorization header is not being sent. Everything was working correctly before I added the error handler. I have also made su ...

angulartypescript

The dropdown menu extends beyond the boundaries of the page

I am attempting to incorporate a dropdown menu in the upper right corner. Here is what I currently have: https://i.sstatic.net/soHgc.png The dropdown menu that appears extends beyond the page boundaries. This is the code I am using: <link rel="st ...

htmlcssbootstrap-4

Adjustable Height Feature for JavaScript Pop-Up Windows

I'm looking to design a popup window that has a fixed width and a height that adjusts based on the user's screen size. Is this even possible? I've searched through various websites but haven't found a solution yet. I came across a simi ...

javascripthtmlcss

Add() function is not duplicating the formatting

I'm attempting to replicate the content below inside a DIV. <ul class="pie-legend"><li><span style="background-color:#0066CC"></span>10-0-1</li><li><span style="background-color:#33CC33&q ...

javascriptjqueryhtmlcss

The jQuery find and replace feature is causing my entire content to be replaced instead of just specific paragraphs

Within this section, there are multiple paragraphs and an input field. The concept is simple: the user inputs text into the box, then hits "ENTER" to trigger a jquery function below. The process involves identifying matches between the paragraph content a ...

javascriptjqueryhtmlcss

What is the best way to retrieve the 5 most recent posts for each genre using Laravel's API

In the process of developing an application (which is my academic project), I am utilizing Laravel 5.4 as my API combined with Angular 5. The focus of my project revolves around a music blog, necessitating specific features like categories and subcategorie ...

phpmysqlangularlaravelapi

navigation bar icons alignment problem

Help with positioning an icon next to the navbar text Example Code: <ul> <li><a href="#" id="other-color" class="ui-btn ui-shadow ui-btn-icon-left ui-custom-icon ui-arrow ui-nodisc-icon">Set Filter</a></li> <li> ...

htmlcss

Unable to change the background color of h1 tag in a ReactJS project

import React from 'react' export default function Home(){ return<div> <h1 className="bg-dark text-white p-3">Home Page</h1> </div> } I am attempting to modify the background color of the h1 tag in my Reac ...

javascriptcssreactjsbootstrap-4

Is there a way to clear a client's browser local storage, session storage, and cache without requiring them to log out?

We make use of local storage, session storage, and cache to store data actively. We maintain this data until the user chooses to logout, without forcing them out. However, we face a challenge when it comes to replacing old data with new data in the cache a ...

angulargoogle-chromecachingcloudflare