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.
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've browsed all of the other questions on this topic and tried all of the sample code that was provided, but I still can't seem to get a fix after a few hours, so here I am.
I am trying to change the color of the selected menu page for my site's navigation. I am using the Astra theme, and Elementor Page builder. I went into WP customizer and made my selections for link color and link hover color, but it seems those changes only take effect when I am on the "Shop" page of my menu. The only difference I can see with the "Shop" menu text is it is a custom link, rather than the starter theme default link? Pictures attached to show what I am talking about.
Red orange color when "Home" is selected
When "Shop" is selected it takes my selected link color from my global color settings. This is the only one that appears to be doing what I asked of it in the UI
The rest of the menu text does the same thing "Home" does - it draws the red orange color from an unknown source, and I don't know what the color code is or where to find it.
I'm trying to either change the selected menu text color away from that red orange color to another custom color -- or keep all of the text as the grey color and make the menu text underlined when hovered over or selected. Issue is I can't seem to make a change consistent when navigating across the menu items. Help would be greatly appreciated!
Write a custom CSS property, use this CSS class for your menu.
Appearance - Customise - Custom CSS (Write your custom CSS here)
Appearance - Menus - Header/Main Menu
At the top of the page, you should the "Screen Option" menu... Click on it and enable(check) the CSS class box.
Now, click on your menu items and specify the CSS class to each menu items.
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;
}
Is there a list of button icons that can be used in App Maker? E.g. when you set the HTML text field of a button to 'Edit' and choose 'Icon' as button style, App Maker conveniently provides me an icon with a pencil on it.
Right now I'm looking for a dropdown arrow icon, but a list of icons would be so useful to make my UIs more clean.
App Maker uses material font:
https://material.io/icons/
So it took me some time re-reading the comments and trying to understand how to do it. This is for future readers:
Go to https://material.io/icons/ and in the search bar on left, type the icon you are looking for. e.g. I am looking for left arrow.
Scroll the page down, and hover over the icon you are looking for and check the exact name of the icon. Copy it.
On your page/page fragment/popup, click on Widgets icon on top left.
Type button, and drag Button on your page (or fragment or popup).
On top left, right beside the Widgets icon, click the drop down and select "Icon".
Ensure your icon is selected on your page. In the property editor on the right,paste the exact name of the icon e.g. "keyboard_arrow_left".
The button will update with the icon of your choice.
Hope it helps.
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).