[Resolved] Primary navigation with logo right align

[Verónica]

Hi! I’m trying to insert the logo on my primary navigation and align it to the right with the search and cart icon, but after following some of the forums article my image doesn’t appear. I have no header and my GP version is 1.5.6.
Could you please help me? I don’t know what I’m doing wrong.
Thanks a lot in advance.

[Verónica]

Finally, I can include the logo in the nav bar and align it to the right, but I’d like to put the search and cart icon after the logo and not before. Is it possible?
Another problem I’m experiencing is that I’v checked the option to show the cart icon on the menu (I’ve also unchecked the font library option), but it’s being not showing.

Hope you can help me.

Regards,

[Tom]

Since those are all menu items, the only way to achieve this would be to add your logo as a menu item.

You can create a new “Custom Link” in “Appearance > Menus”, and add this as the Navigation Label: <img src="https://YOURURL.com/wp-content/uploads/2018/03/Logo-Silvestre.png" />

Then you can drag it into the needed position.

You’ll also want to hide it on mobile, and use the mobile header. You can do this by giving the menu item a custom class: https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

Then hiding it:

.main-navigation.toggled .your-custom-class,
.slideout-navigation .your-custom-class {
    display: none !important;
}

The menu cart icon won’t work currently if essentials is turned on. This is fixed in GPP 1.6, which will be released this week.

Hope this helps!

[Verónica]

Thanks Tom for your help! I can include the logo in the menu following your instructions, but not hidding in the mobile version. When I use the inspector, the menu seems to be disabled https://imgur.com/a82iuMx.
Do you know why?

Regarding the cart icon, the essentials is turn off, and the caches empty, but it’s still doesn’t appear 🙁

View post on imgur.com

Any other idea? Thanks so much

[Tom]

I just edited the CSS above, however, you should be able to use this code which is better for this purpose: https://docs.generatepress.com/article/centering-logo-navigation/#add-your-logo-to-the-navigation

I’m seeing the cart icon on your site – perhaps try clearing your browser cache?

[Verónica]

Thanks Tom for your answer.
I’ve changed the logo class following the instructions on “add your logo to the navigation” article to “hide-on-mobile” and “hide-on-tablet” and now the logo disappears from the toggle menu on mobiles and tablets. I’v also configured the mobile header in order to show the logo on mobiles and tablets. Thanks But there is a strange behavior on tables when they are on landscape orientation because in this case the logo disappears but the toogle menu don’t, so the result is a normal navigation menu without the logo (because the mobile header doesn’t appear). Is this normal?

Regarding the cart icon, I’ve cleaned the browser cache, but it’s only shown on tablets and mobiles, nor desktop version. Can you see it on desktop version? I’ve tried with three browser with the same results in all of them.

Apologizes for disturbing you so much and thanks again for your help.

Verónica

[Tom]

For the first issue, try removing this class from the menu item: hide-on-tablet

For the second issue, can you turn off any CSS/HTML minification you have going on? Looks like Cloudflare maybe? It will allow me to view the HTML to see what’s up 🙂

[Verónica]

Thanks Tom!

Both done! Removing the tablet class make it works! Thanks.
And I have just desactivated HTML/CSS and Javascript minification on cloudfare. Hope it helps!
Thanks a lot in advance!

[Tom]

Ah, it looks like you have this CSS added somewhere:

nav .main-nav li.wc-menu-item {
    display: none!important;
}

[Verónica]

Really? I haven’t customize the nav bar until yersterday, when I followed the instructions for the logo. My custom CSS is the following:

/* Eliminamos los botones en los listados */
.product-categories{
	list-style:none;
}

li{
	list-style:none;
}

/* Alineamos el menú con el slider */
.inside-navigation {
    margin-left: 40px;
		margin-right:45px;
}

/* Modificamos el estilo del filtro de categorias del blog*/

/* Ponemos en negrita la categoría seleccionada */
.lae-filter-item.lae-active a{
    font-weight: bold;	
		font-family:"Lora";
}

/* Eliminamos el subrayado bajo las categorias */
.lae-taxonomy-filter .lae-filter-item{
	border-bottom:0px !important;
}

/* Al pasar por encima de las categorias, estas se ponen en negrita */
.lae-block .lae-taxonomy-filter .lae-filter-item a:hover{
    font-weight: bold;	
		text-decoration:none;
}

/* Modificamos el color de la línea que resalta la categoría seleccionada */
.lae-taxonomy-filter .lae-filter-item.lae-active::after{
	font-weight:bold;
	border-bottom:#000000 1px solid !important;
}

/* Modificacion estilo boton Leer mas */
/* Le quitamos el color */
input.lae-button, button.lae-button, a.lae-button, .lae-button:active, .lae-button:visited {
	background-color: #ffffff !important;
	color: #000000 !important;
	font-family:"Lora";
}

/* Hacemos que se ponga en negrita al pasar por encima */
.lae-button:hover{
	font-weight:bold;
}

/* Alineamos el texto a la derecha */
.lae-read-more {
	text-align: right !important;
}

/* Personalizamos botn de cantidad en la tienda */
.ae-element-woo-add-to-cart .quantity .qty {
    background-color: transparent;
	border: 1px solid #000000;
}

/* Ponemos el footer al final de la pagina para las paginas con poco contenido*/
html, body{
height:100%;
}
body{
display:table;
width:100%;
}
.site-footer{
display:table-row;
height:1px;
}

/* Movemos el logo de la cabecera hacia la derecha */
.logo-on-menu {
    margin-left:30% !important;
}

/* Ponemos el logo en el centro y el menu a la izquierda en la version movil */
#mobile-header .site-logo {
    position: absolute;
    left: calc( 50% - 90px); /* 50% from the left - half your image width */
}

#mobile-header button.menu-toggle {
    position: absolute;
    left: 0;
}

/* Personalizamos la veladura de los sliders */
.elementor-background-overlay {
    height: 20% !important;
    margin-top: 80% !important;
}

/* Cambiamos icono de pinterest en social share */
.fa-pinterest::before {
	content: url("https://tallersilvestre.com/wp-content/uploads/2018/03/Pinterest_logo.png") !important;
}

/* Cambiamos icono de facebook en social share */
.fa-facebook::before {
	content: url("https://tallersilvestre.com/wp-content/uploads/2018/03/facebook_logo.png") !important;
}

/* Personalizamos formulario de mailchimp en el footer */
/* caja de texto */
.mc4wp-form input[type="email"]{
	border: solid 1px #000000;
  border-radius: 0px;
  background-color: transparent;
  height: 16px;
	width: 300px;
  font-size: 13px;
}

.mc4wp-form {
	text-align: left !important;
}

/* boton */
.mc4wp-form input[type="submit"]{
	font-size: 15px;
  margin-left: 0px;
  padding-left: 0px;
  padding-top: 0px;
}

.widget .inner-padding .widget_mc4wp_form_widget{
	padding-bottom:10px !important;
}
/* Separamos los iconos de redes sociales en el footer */
.footer-widgets a, .footer-widgets a:visited{
	margin-right:16px;
}

And there isn’t any rule like this… strange… where can this rule be?
I’ve create the snippets your suggest to show the number of items in the cart instead of the price, but I can’t see any css modification on it..

function tu_custom_wc_cart_link() {
    ob_start();
    ?>
    <a>cart->get_cart_url() ); ?>" class="cart-contents" title="<?php esc_attr_e( 'View your shopping cart','generate-woocommerce' ); ?>">
        <?php _e( 'Cart','generate-woocommerce' );?> - <?php echo sprintf ( _n( '<span class="number-of-items">%d</span> item', '<span class="number-of-items">%d</span> items', WC()->cart->get_cart_contents_count() ), WC()->cart->get_cart_contents_count() ); ?>
    </a>
    <?php
    return ob_get_clean();
}

function tu_custom_wc_menu_cart( $nav, $args ) {
    if ( $args->theme_location == 'primary' && generatepress_wc_get_setting( 'cart_menu_item' ) ) {
        return sprintf( 
            '%1$s 
            <li class="wc-menu-item %4$s" title="%2$s">
                %3$s
            </li>',
            $nav,
            esc_attr__( 'View your shopping cart','generate-woocommerce' ),
            tu_custom_wc_cart_link(),
            is_cart() ? 'current-menu-item' : ''
        );
    }
	
    // Our primary menu isn't set, return the regular nav
    return $nav;
}

function tu_custom_wc_mobile_cart_link() {
	if ( function_exists( 'generatepress_wc_get_setting' ) && ! generatepress_wc_get_setting( 'cart_menu_item' ) ) {
		return;
	}
	?>
	<div class="mobile-bar-items wc-mobile-cart-items">
		<?php do_action( 'generate_mobile_cart_items' ); ?>
		<?php echo tu_custom_wc_cart_link(); ?>
	</div><!-- .mobile-bar-items -->
	<?php

}

add_filter( 'woocommerce_add_to_cart_fragments', 'tu_wc_cart_link_fragment' );
function tu_wc_cart_link_fragment( $fragments ) {
	global $woocommerce;
	$fragments['.cart-contents span.number-of-items'] = ( WC()->cart->get_cart_contents_count() > 0 ) ? '<span class="number-of-items">' . wp_kses_data( WC()->cart->get_cart_contents_count() ) . '</span>' : '<span class="number-of-items"></span>';
	return $fragments;
}

What if I rewrite the rule with another !important instruction? I’ll try to find where is it.

Thanks a lot for your help!!!

[Verónica]

Tom, it was the w3cache minification! Thanks a lot for your help!
Now the cart icon is being showed, but it shows the total price instead of the number of items added, and I’ve include the snippets listed below. Am I missing anything?
Thanks so much for your help!

[Tom]

Where did you add that PHP? Looks like it should work.

[Verónica]

I’ve installed the “Code snippets” plugin and create a new snippet where I’ve pasted the code above and selected the front-end execution. I’ve also tested the execution everywhere with same result. Maybe I’m doing it wrong…

Thanks a lot in advance.

Verónica

[Tom]

It looks like you’re missing the last part of the code, at the bottom of this post: https://generatepress.com/forums/topic/show-quantity-in-cart-in-menu-instead-of-total-costs/#post-332691

[Verónica]

Thanks Tom. Apologizes for the delay. My baby was and still is ill and I couldn’t do any test until now. After adding the last part of the code, now the icon has changed and shows the number of items but also de words “Cart and items”. Is it normal? Do you know a way to hide this words and show only the number?

View post on imgur.com

Thanks again for your help.

[Author]

Posts