- This topic has 23 replies, 3 voices, and was last updated 4 years, 1 month ago by Tom.
-
AuthorPosts
-
February 24, 2020 at 11:24 am #1175582sparkle
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?
February 24, 2020 at 6:13 pm #1175829TomLead DeveloperLead DeveloperHi 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.
February 29, 2020 at 8:56 am #1180721sparkleok. i’m getting closer to what i want. how do i make the hamburger toggle closed by default at the breakpoint?
February 29, 2020 at 4:52 pm #1180934LeoStaffCustomer SupportI’m confused.
It should be closed by default.
Can you disable all caching plugins so I can take a closer look?
March 1, 2020 at 4:55 am #1181201sparklehmmm. i don’t have any caching plugins installed on this one. happy to give you access if that helps.
March 1, 2020 at 9:15 am #1181497LeoStaffCustomer SupportLooks like something called Event Espresso?
Can you just disable all plugins except GP Premium for now?
March 1, 2020 at 9:39 am #1181513sparklei disabled everything. fyi, this is the dev site, so EE throws an error because it’s not the registered url for the access key.
March 1, 2020 at 11:34 am #1181575LeoStaffCustomer SupportThat’s just super strange.
Can you switch to the parent theme to eliminate any errors in the child theme?
Any other custom functions added?
March 1, 2020 at 11:38 am #1181580sparklenot 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; }
March 1, 2020 at 11:41 am #1181586LeoStaffCustomer SupportThat’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.
March 1, 2020 at 11:51 am #1181601sparklei 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/ ***/
March 1, 2020 at 11:57 am #1181614LeoStaffCustomer SupportMaybe it’s the last part that’s not included in our documentation?
https://docs.generatepress.com/article/centering-logo-navigation/March 1, 2020 at 12:18 pm #1181628sparklei 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.
March 1, 2020 at 12:26 pm #1181634LeoStaffCustomer SupportCan you remove this part first?
.main-navigation:not(.slideout-navigation):not(.mobile-header-navigation) .main-nav > ul {display: grid;}
March 1, 2020 at 12:31 pm #1181636sparkleok. now the menu is open and horizontal. i’d like it closed and distributed vertically when it opens. does that makes sense?
-
AuthorPosts
- You must be logged in to reply to this topic.