The objective now is to have one Donate button as the secondary menu and for this button to remain visible on a handheld device. Previously this was working when there were other social icons. In that version the socials would hide and the Donate button remain. Now that it’s on it’s own I have tried multiple edits on the provided CSS and the button fails to show on a small screen.

This was the original solution. My attempts to modify it are in the previous thread.

/* For devices with a maximum width of 768px (tablets and mobiles) */ @media only screen and (max-width: 768px) { .secondary-navigation { display: block; } #menu-social-menu li:nth-child(1), #menu-social-menu li:nth-child(2) { display: none; } }

What am I missing?

Thank you

Thank you

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 '<a href="' . esc_url( home_url( '/' ) ) . '">' . __( 'Home' ) . '</a>';
}

and this code as an additional css:

.storefront-handheld-footer-bar ul li.home > a:before {
content: “\f015”;
}

now I would like to transform the “home” icon into a “heart” icon and link the page pietredurecreazioni.it/lista-dei-desideri/

im looking to add a navigation menu with a Hamburger bars icon to the fixed handheld footer bar…. I found this page (https://docs.woocommerce.com/document/remove-the-handheld-navigation-bar/) that goes through adding a new link (to the home page) with icon and that worked just fine but am not sure how to modify the added function to have a functional navigation menu (or how to assign which predefined menu to use) with links instead of a simple link back to the main page.

im looking to add a navigation menu with a Hamburger bars icon to the fixed handheld footer bar…. I found this page (https://docs.woocommerce.com/document/remove-the-handheld-navigation-bar/) that goes through adding a new link (to the home page) with icon and that worked just fine but am not sure how to modify the added function to have a functional navigation menu (or how to assign which predefined menu to use) with links instead of a simple link back to the main page.

Thanks a lot!

here is the additional css:

/*Logo Size*/
         .woocommerce-active .site-header .site-branding img {
          max-width: 60%;
					 margin:0 auto;
          }
          
          @media screen and (max-width: 768px) {
.woocommerce-active .site-header .site-branding img {
          max-width: 80%;
          }
}

@media screen and (max-width: 375px) {
.woocommerce-active .site-header .site-branding img {
          max-width: 80%;
          }

}

@media screen and (max-width: 320px) {
.woocommerce-active .site-header .site-branding img {
          max-width: 80%;
          }

}

/*Logo center*/

.site-branding {
		text-align: center;
		margin: 0 auto !important;
		float: none !important;
	}

/*Page title*/

.entry-title{
  text-align:center;
	font-weight: 500;
	padding-bottom: 50px;
}

/*remove certain page titles*/
.page-id-293 .entry-title{
display:none;
}

/* Remove search widget from header */
.widget_product_search form {
  display: none;
}

/*Navbar*/
.woocommerce-active .site-header .main-navigation{
   width:100%;
	 padding-left: 100px;
}

and is there a way to force the ipad version to use the handheld navbar?

Please check the attached screenshot.

https://prntscr.com/tfmcbt

I have the same hamburger handheld menu just want to add this on top of that menu.

Thanks in advance.