logo centered on nav, a little more help

[sparkle]

hi there,

i followed the directions here to put my logo in the center of my nav. super straightforward, thanks for having such great docs.

https://docs.generatepress.com/article/centering-logo-navigation/

i’m trying to get it to degrade nicely for smaller screens. i was able to make the logo disappear, but am not sure what else i can do about the awkward spacing below about 1024. do you have any ideas?

[Tom]

Hi there,

You can hide the separator at whatever width using a media query:

@media (max-width: 1024px) {
    .main-navigation .menu-item-separator {
        display: none;
    }
}

This kind of layout is typically best to menus with minimal menu items – it can be a little tricky adjusting things to be responsive when there are lots of items getting in the way.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[sparkle]

ok. i’m getting closer to what i want. how do i make the hamburger toggle closed by default at the breakpoint?

[Leo]

I’m confused.

It should be closed by default.

Can you disable all caching plugins so I can take a closer look?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[sparkle]

hmmm. i don’t have any caching plugins installed on this one. happy to give you access if that helps.

[Leo]

Looks like something called Event Espresso?

Can you just disable all plugins except GP Premium for now?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[sparkle]

i disabled everything. fyi, this is the dev site, so EE throws an error because it’s not the registered url for the access key.

[Leo]

That’s just super strange.

Can you switch to the parent theme to eliminate any errors in the child theme?

Any other custom functions added?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[sparkle]

not surprisingly, when i enabled the parent theme i see it’s something in my child theme. i have no idea what though.

i do have some things in my functions file:

<?php
/**
 * GeneratePress child theme functions and definitions.
 *
 * Add your custom PHP in this file. 
 * Only edit this file if you have direct access to it on your server (to fix errors if they happen).
 */

function generatepress_child_enqueue_scripts() {
	if ( is_rtl() ) {
		wp_enqueue_style( 'generatepress-rtl', trailingslashit( get_template_directory_uri() ) . 'rtl.css' );
	}
}
add_action( 'wp_enqueue_scripts', 'generatepress_child_enqueue_scripts', 100 );

/** 
 * Enqueue Font Awesome. 
 */
 
 add_action( 'wp_enqueue_scripts', 'tu_load_font_awesome' );
 
 
function tu_load_font_awesome() {
    wp_enqueue_style( 'font-awesome', '//use.fontawesome.com/releases/v5.5.0/css/all.css', array(), '5.5.0' );
}

/**
 * Remove archive page labels.
 * 
 * @param  string $title Current archive title to be displayed.
 * @return string        Modified archive title to be displayed.
 */
 
add_filter( 'get_the_archive_title', 'my_theme_archive_title' );

function my_theme_archive_title( $title ) {
    if ( is_category() ) {
        $title = single_cat_title( '', false );
    } elseif ( is_tag() ) {
        $title = single_tag_title( '', false );
    } elseif ( is_author() ) {
        $title = '<span class="vcard">' . get_the_author() . '</span>';
    } elseif ( is_post_type_archive() ) {
        $title = post_type_archive_title( '', false );
    } elseif ( is_tax() ) {
        $title = single_term_title( '', false );
    }

    return $title;
}
 // Move add to cart button below quantity on single product page
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 15 );

 // Remove additional information tab from single product
add_filter( 'woocommerce_product_tabs', 'remove_additional_information_tab', 100, 1 );
function remove_additional_information_tab( $tabs ) {
    unset($tabs['additional_information']);

    return $tabs;
}

// Add "additional information" after add to cart  on single product page
add_action( 'woocommerce_single_product_summary', 'additional_info_under_add_to_cart', 35 );
function additional_info_under_add_to_cart() {
    global $product;

    if ( $product && ( $product->has_attributes() || apply_filters( 'wc_product_enable_dimensions_display', $product->has_weight() || $product->has_dimensions() ) ) ) {
        wc_display_product_attributes( $product );
    }
}

/**
 * Move Product Description up to main section  on single product page
 * 
 */

function woocommerce_template_product_description() {
wc_get_template( 'single-product/tabs/description.php' );
}
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_product_description', 20 );

add_action( 'woocommerce_before_add_to_cart_form', 'woocommerce_output_product_data_tabs', 10 );

// remove product description from bottom of single product pages
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
add_filter( 'woocommerce_product_tabs', 'wc_remove_description_tab', 11, 1 );
function wc_remove_description_tab( $tabs ) {
    if ( isset( $tabs['description'] ) ) {
        unset( $tabs['description'] );
    }
}

// testimonial archive columns

add_filter( 'generate_blog_columns','generate_adjust_columns' );
function generate_adjust_columns( $columns )
{
    if ( is_post_type_archive( 'testimonial' ) ) :
        return true;
    endif;

    return $columns;
}

and this is my child theme style.css

/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

/*** sitewide/layout  ***/

body .grid-container {
    max-width: 90%;
}
input, select, textarea {font-family: "Open Sans", Sans-serif; }

.sidebar {margin-top: 5%;    
}

a.button, button.button, input.button, #review_form #submit, button, html input[type="button"], input[type="reset"], input[type="submit"], a.button, a.button:visited, a.wp-block-button__link:not(.has-background), .wp-show-posts-read-more  {border-radius: 100px!important; }

/*** navigation  ***/
.main-navigation ul ul {box-shadow: 0px 0px 5px 0.3px #4817a7; }

.main-navigation .main-nav ul li[class*="current-menu-"] > a {border-bottom: 2px solid rgba(71, 23, 166, 0.6); text-shadow: 0px .5px #010106; 
	font-weight:  500;}

/*** gp center logo in nav https://docs.generatepress.com/article/centering-logo-navigation/  ***/
.inside-header {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

.header-widget {
	order: 10;
	overflow: visible;
}

.nav-float-right .header-widget {
	top: auto;
}

.nav-float-right .header-widget .widget {
	padding-bottom: 0;
}

.site-branding,
.site-logo {
	position: absolute;
	left: 50%;
	-webkit-transform: translateX(-50%);
	        transform: translateX(-50%);
	z-index: 200;
}
#mobile-header .mobile-bar-items {
	-webkit-box-ordinal-group: 5;
	-ms-flex-order: 4;
	order: 4;
	margin-left: auto;
}
#site-navigation {
	float: none;
	width: 100%;
}

.main-navigation:not(.slideout-navigation):not(.mobile-header-navigation) .main-nav > ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

.main-navigation .menu-item-separator {
	-webkit-box-flex: 1;
	    -ms-flex-positive: 1;
	        flex-grow: 1;
}

.main-navigation .menu-item-separator a {
	font-size: 0;
	background: transparent !important;
}

.slideout-navigation .menu-item-separator,
.main-navigation.toggled .menu-item-separator{
	display: none !important;
}

@media (max-width: 768px) {
	.inside-header>:not(:last-child):not(.main-navigation) {
		margin-bottom: 0;
        }
}

@media (max-width: 1024px) {
    .main-navigation .menu-item-separator {
        display: none;
    }
    
    .site-header .header-image {
    display: none;
    }
    
    .main-navigation:not(.slideout-navigation):not(.mobile-header-navigation) .main-nav > ul {display: grid;}
    
    .mobile-bar-items.wc-mobile-cart-items {
    display: none;
}

}
}
/*** END gp center logo in nav https://docs.generatepress.com/article/centering-logo-navigation/  ***/

/*** front page elements  ***/

/* hero */
.elementor-554 .elementor-element.elementor-element-3c60d19f.elementor-widget-heading .elementor-heading-title, .elementor-554 .elementor-element.elementor-element-54455ba3.elementor-widget-heading .elementor-heading-title {
    -webkit-text-stroke: black .5px;}

/* ee3 */

.elementor-element-f3e97d7.elementor-widget.elementor-widget-wp-widget-events-widget div.elementor-widget-container ol {list-style: none; margin: 0;}
.elementor-element-f3e97d7.elementor-widget.elementor-widget-wp-widget-events-widget div.elementor-widget-container ol li a {font-weight: 700;}
.elementor-element-f3e97d7.elementor-widget.elementor-widget-wp-widget-events-widget div.elementor-widget-container ol li a span.widget-event-date {font-weight: 300;}

/* blog latest article */
#wpsp-836 .wp-show-posts-entry-header {
    margin: -15% 0 1em;
    z-index: 100;}
 #wpsp-836 .wp-show-posts-entry-header a {
    color:white; font-weight: 600; text-shadow: 0px 2px 4px #000000; }

/*** woocommerce  ***/
.woocommerce-breadcrumb {font-family: "Rokkitt", Sans-serif;}

div.entry-content nav.woocommerce-breadcrumb a  {color: #4817a7;}
div.entry-content nav.woocommerce-breadcrumb {color: #871b88;} 
 

 

.woocommerce-products-header {display: none;}

.product-template-default div.summary.entry-summary p {   font-family: "Open Sans", Sans-serif; line-height: 180%;}

/* woocommerce  increase space between rows on shop pg */
.woocommerce ul.products li.product.woocommerce-text-align-left .button {
    margin-bottom: 5vh;
}

.single-product .product .single_add_to_cart_button.button, .woocommerce .product .add_to_cart_button.button, .product-type-external a.button.product_type_external{
	border-radius: 100px; font-family: "Rokkitt", Sans-serif; text-transform: uppercase; font-weight: 600;
}

.woocommerce div.product .product_title, .woocommerce table.shop_attributes,  .related.products h2, .product-template-default div.summary.entry-summary h2 , .woocommerce-Price-amount.amount, a.woocommerce-LoopProduct-link.woocommerce-loop-product__link h2.woocommerce-loop-product__title, nav.woocommerce-pagination ul.page-numbers li a.page-numbers {font-family: "Open Sans", serif; }

a.woocommerce-LoopProduct-link.woocommerce-loop-product__link h2.woocommerce-loop-product__title,  {font-family: "Open Sans", serif; font-size: 90%;
    font-weight: 700;
}

/*** event espresso **/

aside#events-widget-2.widget.inner-padding.events ol li a {font-weight: 700;}
aside#events-widget-2.widget.inner-padding.events ol li a span.widget-event-date {font-weight: 300;}

/*** short testimonials full page width ***/

.short-testimonials {
	text-shadow: 0px 2px 4px #cccccc;}
	
.amazingslider-title-1	{
    color: #3B45E1;
    font-family: "Rokkitt", Sans-serif;
    font-size: 150%;
    font-weight: 700;
    text-shadow: 0px 2px 4px #cccccc;
}
	
.st-button {
	text-shadow:none; 
	
}
.st-callout {font-family: "Rokkitt", Sans-serif;
    font-size: 130%;
    font-weight: 700;
    color: #3B45E1;
    
    }
    
 .st-attribution {color: #005257;
	     font-family: "Open Sans", Sans-serif;
	font-size: 80%!important; 
    font-style: italic;
    float:right;
    text-align:start;
    text-indent:-5em;
	 
 }   
 
 
 /* archive read  more float right */
 .read-more {
    margin-top: 2%;
    float: right;
    text-transform: uppercase; font-family:  "Rokkitt", Sans-serif; font-size: 90%;
        font-weight: 500;

}
    
.sidebar .widget, .footer-widgets .widget {
    font-size: 15px;
}    
    
    /******************** smaller media mobile adjustments ************************ */
    /******************** smaller media mobile adjustments ************************ */
    /******************** smaller media mobile adjustments ************************ */
    /******************** smaller media mobile adjustments ************************ */
    
    
    /* very large screens  HUGE */
    @media (min-width: 1824px) { 	
    	/* comment */
    
    	
    /* END very large screens  HUGE */	}
    	
    
    
    /* Portrait tablet to landscape and desktop  LAPTOP */
    @media (min-width: 768px) and (max-width: 1024px) { 
    	/* comment */

    /* END Portrait tablet to landscape and desktop */}
    
    
    /* Landscape phone to portrait tablet  TABLET */
    @media (max-width: 767px) { 
    	/* comment */
    	
.elementor-484 .elementor-element.elementor-element-f0ef5e3:not(.elementor-motion-effects-element-type-background) > .elementor-element-populated, .elementor-484 .elementor-element.elementor-element-f0ef5e3 > .elementor-column-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer  {background-image:none!important;}
.amazingslider-description-1, .amazingslider-title-1 {
    font-size: 125%!important;
}

         
    /* END Landscape phone to portrait tablet */}
    
    
    /* Landscape phones and down  PHONE*/
    @media (max-width: 480px) { 
    	/* comment */
    	
    	.site-header .header-image {
    display: none;
}
    	
    /* END Landscape phones and down */}
    
html, body {
        max-width: 100%;
        overflow-x: hidden;
    }
    		

[Leo]

That’s tough for me to tell.

Start with disabling all the PHP functions first and enable them one by one until you identify the issue.

If that doesn’t work then do the same thing for CSS.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[sparkle]

i think it’s somewhere in this block. i got from the docs in the url in my comment. the last bits i added when tom answered my forum topic. when i remove it the hamburger works properly.

/*** gp center logo in nav https://docs.generatepress.com/article/centering-logo-navigation/  ***/
.inside-header {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

.header-widget {
	order: 10;
	overflow: visible;
}

.nav-float-right .header-widget {
	top: auto;
}

.nav-float-right .header-widget .widget {
	padding-bottom: 0;
}

.site-branding,
.site-logo {
	position: absolute;
	left: 50%;
	-webkit-transform: translateX(-50%);
	        transform: translateX(-50%);
	z-index: 200;
}
#mobile-header .mobile-bar-items {
	-webkit-box-ordinal-group: 5;
	-ms-flex-order: 4;
	order: 4;
	margin-left: auto;
}
#site-navigation {
	float: none;
	width: 100%;
}

.main-navigation:not(.slideout-navigation):not(.mobile-header-navigation) .main-nav > ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

.main-navigation .menu-item-separator {
	-webkit-box-flex: 1;
	    -ms-flex-positive: 1;
	        flex-grow: 1;
}

.main-navigation .menu-item-separator a {
	font-size: 0;
	background: transparent !important;
}

.slideout-navigation .menu-item-separator,
.main-navigation.toggled .menu-item-separator{
	display: none !important;
}

@media (max-width: 768px) {
	.inside-header>:not(:last-child):not(.main-navigation) {
		margin-bottom: 0;
        }
}

@media (max-width: 1024px) {
    .main-navigation .menu-item-separator {
        display: none;
    }
    
    .site-header .header-image {
    display: none;
    }
    
    .main-navigation:not(.slideout-navigation):not(.mobile-header-navigation) .main-nav > ul {display: grid;}
    
    .mobile-bar-items.wc-mobile-cart-items {
    display: none;
}

}
}
/*** END gp center logo in nav https://docs.generatepress.com/article/centering-logo-navigation/  ***/

[Leo]

Maybe it’s the last part that’s not included in our documentation?
https://docs.generatepress.com/article/centering-logo-navigation/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[sparkle]

i mean, yes. that’s what i’ve been asking after. how do i make the toggle closed instead? those bits helped me take out the centered nav and get the alignment better on mobile.

[Leo]

Can you remove this part first?
.main-navigation:not(.slideout-navigation):not(.mobile-header-navigation) .main-nav > ul {display: grid;}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[sparkle]

ok. now the menu is open and horizontal. i’d like it closed and distributed vertically when it opens. does that makes sense?

[Author]

Posts