I created custom menu into my Wordpress site. I registered the new menu into functions.php file using this code:
// Add new Footer menu
function register_my_menu() {
register_nav_menu('new-menu',__( 'New Footer Menu' ));
}
add_action( 'init', 'register_my_menu' );
and after that inserted this line into footer.php file from current theme:
<?wp_nav_menu( array( 'theme_location' => 'new-menu', 'container_class' =>
'new_menu_class' ) ); ?>
and menu is showing into footer, but its showing into list view, and I want to show vertically inline in footer, of course centered is possible. I used CSS to add inline styling like this:
.new_menu_class {
display:inline-flex;
}
But seems do not many any changes to menu in footer. Any help here?
You're applying styles to the container of the wp_nav_menu function where the structure of the returned html is
<div class="new_menu_class"> <ul> <li>...
'container_class'
(string) Class that is applied to the container. Default 'menu-{menu slug}->container'.
https://developer.wordpress.org/reference/functions/wp_nav_menu/
For your CSS to be applied on the list items (I'm assuming you wish to have the horizontally). you will need to add this class under the arguments for 'menu_class'
'menu_class'
(string) CSS class to use for the ul element which forms the menu. Default 'menu'.
If you applied the same class in your question to the menu_class you could apply the following:
.new_menu_class {
display: flex;
align-items: stretch;
justify-content: space-evenly;
width: 80%;
margin: 0 auto;
padding: 0;
}
Looking at your site I can see you have a set width container with media queries, I would suggest the same when applying this so as your UI is clear when viewing on smaller devices.
Related
I am configuring Storefront theme. The handheld footer bar of Storefront shows links on mobile devices. However, now, it just shows Font Awesome icons (not include text). How to include text under Font Awesome icons in this case?
I have tried to edit some codes, but the search bar appeared as an error in handheld footer bar of storefront.
Php codes added to functions.php:
add_filter( 'storefront_handheld_footer_bar_links', 'jk_add_home_link' );
function jk_add_home_link( $links ) {
$new_links = array(
'home' => array(
'priority' => 10,
'callback' => 'jk_home_link',
),
);
$links = array_merge( $new_links, $links );
return $links;
}
function jk_home_link() {
echo '' . __( 'Home' ) . '';
}
CSS:
.storefront-handheld-footer-bar ul li.home > a:before {
content: "\f015";
}
The text “Home” will not be displayed if I use above codes. How to display it under the Font Awesome icon?
Your code is fine but the text is hidden by this property decleration:
.storefront-handheld-footer-bar ul li > a {
text-indent: -9999px;
}
play around with the indent to position it. Not tried.
Same question answered by myself on https://stackoverflow.com/a/68511882/11225860, coping it from there.
The text is hidden due to "text-indent: -9999px;" so you can change it as follows.
Here I am additionally added "line-height:" to arrange position of the text.
.storefront-handheld-footer-bar ul li > a {
text-indent: 0px;
line-height: 95px;
}
If you need to adjust position of the icons, you can add following css and make changes on the value.
.storefront-handheld-footer-bar ul li>a::before {
line-height: 2;
}
I am using Wordpress and WooCommerce to build a website for my client. For every product page I have set up two groups of links (buttons, secondary menu) to allow user to visit other product category pages. I would like certain links to be automatically a specific color and weight when the user is on a certain product page (like an active state, but without having to first clicked on the link, I guess similar to breadcrumbs to show where the user is in terms of what category/categories the product they're viewing belongs to).
I've been trying to target the post-id and the div of the specific links to make css changes, but it's not working. I would really appreciate any help!
Here is the css I used to target a specific secondary menu link:
#menu-item-1886 > a {
color: #003b59 !important;
font-weight: 600;
}
This works, but of course it made the change to this menu item across all pages. I want it to be only on a specific product page.
I also tried this, which also didn't work:
.body.post-id-766 #menu-item-1886 > a {
color: #003b59 !important;
font-weight: 600;
}
The site is at http://www.hoptri.d-gecko.com
Again, really would appreciate your help with this! Thanks in advance!
You can add with body_class WordPress filter hook and choosen conditional tags some additional classes where you want, like in this example:
add_filter( 'body_class', 'adding_some_custom_body_classes' );
function adding_some_custom_body_classes( $classes ) {
if ( is_product() ) {
$classes[] = 'product-single-pages';
} elseif( is_product() && is_single( array( 17, 19, 1, 11 ) ) {
$classes[] = 'product-single-pages-2';
}
return $classes;
}
Code goes in function.php file of your active child theme (or theme) or also in any plugin file.
This code is tested and works
So you will be able to use that classes selectors in your CSS rules like (fake example):
body.product-single-pages #menu-item-1886 > a,
body.product-single-pages2 #menu-item-1886 > a { font-weight: 600; }
body.product-single-pages #menu-item-1886 > a { color: green !important; }
body.product-single-pages2 #menu-item-1886 > a { color: red !important; }
WooCommerce inject yet in body classes some specific classes as in this html example:
<body class="product-template-default single single-product postid-19 logged-in woocommerce woocommerce-page right-sidebar woocommerce-active customize-support">
So you can also use this class selectors in your css:
single-product
woocommerce
woocommerce-page
woocommerce-active
For example this way:
body.woocommerce.single-product.woocommerce-active #menu-item-1886 > a {
color: blue !important;
}
References to conditional tags:
Wordpress conditional tags list
WooCommerce conditional tags list
I am currently going through Wordpress tutorials.
The pages that I have created here are all in Capatalized case (e.g. About us). During run-time I want them to automatically convert to upper-case (i.e. ABOUT US) instead of changing the page titles through the dashboard.
I am aware about the php's strtoupper() method however not sure where to apply this so that it dynamically changes the page titles to upper-case in the nav menu.
CODE in header.php:
<!-- Nav Menu -->
<nav class="site-nav clearfix">
<?php
$args = array(
'theme_location' => 'primary'
);
wp_nav_menu( $args ); enter code here
?>
</nav>
This code in the stylesheet should work:
nav.site-nav li {
text-transform: uppercase;
}
Is there a way to add a "class" to this line to make it adhere to the .button styling in my CSS stylesheet?
<?php submit_button(__('Update Profile')); ?>
Thanks
submit_button() is a core admin utility function. It's one of the many elements making up the WordPress admin theme and it's supposed not to be styled, so it will gracefully change when WP core developers decide to change the admin theme.
However, if you really want to style that particular button, here's what I suggest: add a custom attribute to your button, called data-style:
<?php
$attributes = array( 'data-style' => 'custom' );
submit_button ( 'Update Profile', 'primary', 'submit', true, $attributes );
?>
And, in your CSS you can now style your button with:
[data-style="custom"] {
/* style your button here */
}
UPDATE: Trix's answer made me take a closer look at the function referrence and realized ($type) can safely be used to add custom classes to any WP admin button. It's as simple as:
submit_button ( 'Update Profile', 'custom-class' );
Note that (according to the function reference) your button will still have the default button class. This should work:
.button.custom-class {
/* styles here */
}
UPDATE 2:
I've done some more testing and apparently, the function works as advertised. The actual output of
submit_button(__('Update Stuff'), "custom-class");
was:
<p class="submit">
<input type="submit"
name="submit"
id="submit"
class="button custom-class"
value="Update Stuff">
</p>
Most of the rules applying to the buttons in WP admin area are prefixed with .wp-core-ui. In this case, they come from .wp-core-ui .button or .wp-core-ui .button:hover. So the following selectors should work:
.wp-core-ui .button.custom-class {
/* normal state rules here */
}
.wp-core-ui .button.custom-class:hover {
/* hover state rules here */
}
.wp-core-ui .button.custom-class:focus,
.wp-core-ui .button-custom-class:active {
/* active/focus state rules here */
}
For example, adding this to the dashboard CSS changed the appearance of my button, without affecting other buttons:
.wp-core-ui .button.custom-class {
background-color: #272727;
border-color: #666;
color: #ddd;
}
.wp-core-ui .button.custom-class:hover {
background: #212121;
border-color: #666;
color: white;
}
Made it look like this:
Please note that .custom-class rules will be overridden by any rules set with .wp-core-ui .button (the default selector for buttons in WP Admin).
You may simply ,add your class like this:
submit_button( __('Update Profile'), 'my-custom-class' );
<?php submit_button(__('Update Profile', 'button')); ?>
This should work :) You can view the parameters of submit_button() here:
https://developer.wordpress.org/reference/functions/submit_button/
As you can see, the default class should be "primary". I dont know if Wordpress requires that, otherwise I guess you could just try:
<?php submit_button(__('Update Profile', 'button primary')); ?>
this is my code for navigation ----->
$main = array( 'theme_location' => 'header-menu' , 'link_before' => '<span>',
'link_after' => '</span>','container' => '',
'items_wrap' => '%3$s',
);
wp_nav_menu( $main );
i am applying span tag to style li items . what i actually want to do is that span tag should only be applied to main menu (depth = 1 in hierarchy ) and not to its sub menus(in drop down)
html ouptut is something like
<ul class=main>
<li><span>Testimonials</span></li> >
<li><span>Testimonials</span></li> >
<ul class ="sub=menu" >
<li><span>Testimonials</span></li> >
</ul>
<li><span>Testimonials</span></li> >
</ul>
i dont want span tag in sub-menu class li items, is there a way to do this .?
If you want to style the sub-menu differently, the identifier you should be using is .sub-menu but depending on the theme you are using, the author for the theme might have styled either the UL, LI, or A of the menu. Find that out from style.css and write your code for the same identifier.
eg. if style.css contains something like this
.menu li a { background: #fff; }
then you'll need to write this line:
.sub-menu { background: #888; }
It's also a good practice to use background if the theme's style used 'background', and 'background-color' if the theme's style used background-color.