The default PrimeNG menubar includes a little down arrow next to every main menu title. I want to remove the down arrows completely from the top-level menu title. Nested sub-menus may display a right arrow to show there is a sub-menu, and those can stay. Here are some screenshots with default menubar:
https://www.primefaces.org/primeng/showcase/#/menubar
I can change the icons in the menu items easily, but can't find a handle to change/hide the arrows.
I'm using Angular CLI 9.1.8 and PrimeNG 9.1.0.
to hide it in style.css change its content like
.pi-caret-down::before{
content: "";
}
check in developer console inspect element font name then make its before css as content: "";
Using display:none has the added benefit of resizing the menuitem container to adjust for the removed arrow icon. Otherwise, you will be left with a blank space.
.pi-caret-down {
display:none;
}
Related
I have tried to remove the dropdown arrow that appears when making a dropdown menu in wordpress.I have not found a solution so I was wondering you can type in any extra css to fix it.
Thanks!
Arrow is next to "hudvård" in the menu.
Picture: drop down menu
The dropdown arrow is a Font Awesome icon <i class="icon-angle-down"></i>.
You can use .nav-top-link i { display:none; } to hide it with CSS.
I have 6 item in my header menu but I want to make one of them red. How can I do that? Please explain more detailed because I am a lawyer....
Go into Appearance > Menu and select the menu you're after.
Under 'Screen options' on top, check the box to show attributes.
Find your menu item and click it. You'll see the ability to add a class name. Remember what you added.
Under theme options (in the left menu) choose 'global css' and add your styling there.
.class-name { background- color: red;}
I am using the Wizard WordPress theme. One of the features it provides is a hamburger button/menu. Is there anyway to change the size of the hamburger button/menu?
you can set the size of the hamburger icon in css:
name-of-icon {
width:22px;
height:22px;
}
To get the name of the icon, select the hamburger icon on the browser, click right mouse button, select "examine" (may be other name), then on the opening window you see all css rules for the icon and you will find the name of the icon.
Most Themes have the possibility to adjust css.
I would like to create a custom message box layout to my application.
I want the header to hold the icon next to the window title.
I want the header to have a bottom border ( this can be achieved by CSS I think)
I want this layout to be on all of my message boxes.
Where do I determined the layout of the window ?
I have looked for the window TPL but could not find it...
To show the icon in the header next to the title, instead of using the icon configuration, use the iconCls configuration. While the icon config is overridden in Ext.window.MessageBox, iconCls is not.
The bottom border and the icon, you will define them in your own css file. I'm not sure if you can limit the bottom border only to messageboxes, and not have the in other windows.
An example css can look like this:
.x-window-header .x-box-inner {
border-bottom: 1px solid #333;
}
.msg-question {
background-image: url('questionmark-icon.png');
}
Your message box would be like:
Ext.Msg.show({
title:'Save Changes?',
msg: 'Would you like to save your changes?',
buttons: Ext.Msg.YESNOCANCEL,
iconCls: 'msg-question'
});
I'm developping a Wordpress website for a painter, and I'd like to use paintings as backgrounds for menu elements, just like on this picture :
http://img829.imageshack.us/img829/7364/capturedcran20120509094.png
The active page has colors, the inactive ones are in black and white, and become colored on mouse over.
I'm using a premium WP theme to have a similar menu, but I don't know how to achieve this menu. (this is a dropdown menu, if there is a submenu, everything below it drops down as it appears, but there is no spacial background on the submenu).
Do you know how to achieve that, please ?
There is no any type of option in WP menu but you can do it by assign class for each menu from WP menu section and providing custom CSS
Like
And CSS with bg image
.dashboard a {
background: url(../../images/navicons/81.png) no-repeat;
}
Just use the ID of the items and apply a background with CSS. Then add a Greyscale script: http://www.pryde-design.co.uk/2011/08/greyscale-jquery-plugin/ You can also apply a CSS fall-back if necessary (not with grey scale, but with opacity).