[Support request] Side Menu scrorable

[Irene]

Hi, David from Customer Support ask me to start a new topic to help me.

I follow his recommendation and I use Navigator Site of the Generate Press theme to do the design (https://generatepress.com/site-library/)

I use Elementor Pro for the layout but I need help to do this things:

-Change de version logo in some pages
-Menu nav up in tablet and mobile
-Add social icons down the menu

Thanks.

[David]

Hi Irene,

Logo change by page, this article explains how to swap logos based on Conditional Tags:

https://docs.generatepress.com/article/generate_logo/

The example given uses the is_category condition, you can change that accordingly, this article provides the different tags:

https://codex.wordpress.org/Conditional_Tags

Mobile header – remove the following code from Customiser > Additional CSS:

#mobile-header {
    position: fixed;
    bottom: 0;
}

#generate-slideout-menu {
	border-top-right-radius: 10px;
}

.slideout-navigation ul:not(.toggled) .dropdown-menu-toggle:before {
    transform: rotate(180deg);
    display: inline-block;
}

.offside {
	height: auto !important;
	bottom: 0 !Important;
	top: auto;
}

.offside-js--is-open .slideout-overlay {
	opacity: 0.5;
}

.slideout-exit {
	visibility: hidden;
}

Social icons, add you widget or shortcode to the Header widget, once its there i can help position it if needed.

[Irene]

Hi,

Thanks for the info, I’m so appreciated.

I have some issues about:

-Make the logo in the mobile versión bigger and centered and the hamburguer too.

-I use the filters, but now appears 3 error messages at the home page in the menu nav. The php code I inserted is this above and I use de funtions.php from the GeneratePress Child theme:
add_filter( ‘generate_logo’,’tu_category_logo’ );
function tu_category_logo( $logo ) {

// Return our category logo URL
if ( is_page ( wedding ) ) {
return ‘http://saskiabauerphotography.es/wp-content/uploads/2018/07/Logo_SaskiaBauer-03.png’;
}

// Otherwise, return our default logo
return $logo;
}

add_filter( ‘generate_logo’,’tu_category_logo2′ );
function tu_category_logo2( $logo ) {

// Return our category logo URL
if ( is_page ( family ) ) {
return ‘http://saskiabauerphotography.es/wp-content/uploads/2018/07/Logo_SaskiaBauer-02.png’;
}

// Otherwise, return our default logo
return $logo;
}

add_filter( ‘generate_logo’,’tu_category_logo3′ );
function tu_category_logo3( $logo ) {

// Return our category logo URL
if ( is_page ( corporative ) ) {
return ‘http://saskiabauerphotography.es/wp-content/uploads/2018/07/Logo_SaskiaBauer-04.png’;
}

// Otherwise, return our default logo
return $logo;
}

-I design the social icon in Elementor and inserted in the HEADER section of the widgets but doesn’t appear…

Thanks for your help.

[David]

HI Irene,

lets fix the errors first. You need to enclose the title / page slug in ‘quotes’ eg

if ( is_page ( 'wedding' ) ) {

once we get the errors fixed we can look at the social icons.

[Irene]

Hi, it’s done and it works.

I saw the icons now in the nav menu. That’s ok.

This is the only point is missing, for the moment…

-Make the logo in the mobile versión bigger and centered and the hamburguer too.

Thank you so so much for your help.

[David]

Site is looking great!

So the sizes of logos and the menu toggle are set by the navigation font size and the line height. So increasing them in the customiser would make them larger. If you want to set them independently then you can do this:

.menu-toggle {
    font-size: 18px;
}
.mobile-header-navigation .mobile-header-logo img {
    height: 80px;
}

Centering the logo like so, just adjust the translateX pixels to half of the logos width:

#mobile-header .site-logo {
    margin-left: auto;
    transform: translateX(40px);
}

[Irene]

Hi,

Thanks, but I realise that the menu on movile is not show: http://saskiabauerphotography.es/wp-content/uploads/2018/07/Captura-de-pantalla-2018-07-19-a-las-13.17.44.png in this picture you can see it.

How can I solve this?

[David]

OK, you’re using the Slide Out Navigation, you need to assign a menu to it like you would your Primary or Secondary Navigation. Just go Customiser > Menus – select your menu and Check Slideout Navigation.

[Author]

Posts