[Resolved] menu on the left side !!

[Theresia]

Help please,
i have Theme Flint Skin Navigator installed and want the menu on the left side !!
best regards Theresia

[Leo]

Hi there,

The menu should be on the left side by default as shown in our demo here:
https://generatepress.com/site-library/

Is it on the right side for you?

If so can you link us to the page in question?

[Theresia]

Yes, the menu is on the left side.

I would like it on the right side!

Regards Theresia

[David]

Hi Theresia, head to the Customiser > Additional CSS. You are going to look for these two rules, i have commented below the two lines you need to change:

.site-header {
    position: fixed;
    left: 0; /* Change to right: 0; */
    top: 0;
    width: 200px;
    z-index: 300;
    height: 100%;
    overflow: auto;
    overflow-x: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-overflow-scrolling: touch;
    transition: .1s ease;
}

body {
    margin-left: 200px; /* change to margin-right: 200px; */
}

[Theresia]

Hi David,

Many Thanks. It is working.
Regards Theresia

[David]

You’re welcome.

[Theresia]

Hi David,

I have another question? can I add a phone, mail, book icon for the mobile view in the footer and link it?

I use the Navigator Theme. In the footer is the logo on the left and the Hamburger menu on the right. Instead of the logo I want this 3 icon.
Many Thanks Theresia

[David]

Hi, ok will take a bit of code if your up for that. Regarding the icons, are you using any page builder? Or do you have your own icons?

[Theresia]

hi, i have the page builder Elementor. I haven’t got any icons. I would be happy if you can send me the code Regards Theresia

[David]

OK, so as long as you are using Elementor on all pages we can use the font awesome library that it uses. So first off we need to add a PHP snippet, here’s how to, i recommend the Code Snippets plugin option if you are not using a child theme:
https://docs.generatepress.com/article/adding-php/

add_action( 'generate_inside_mobile_header','tu_mobile_header_html' );
function tu_mobile_header_html() { ?>
    <div class="mobile-bar-items">
        <a href="URL"><i class="fa fa-phone" aria-hidden="true"></i></a>
	<a href="URL"><i class="fa fa-book" aria-hidden="true"></i></a>
  	<a href="URL"><i class="fa fa-envelope" aria-hidden="true"></i></a>
    </div>
<?php }

You need to update the href to include the URL you wish it to go to.

Once this is added head to the Customiser > Additional CSS. Scroll to the bottom of the code. And paste in this CSS:

#mobile-header .mobile-bar-items {
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
    line-height: 60px;
	padding-left: 10px;
}

#mobile-header .mobile-bar-items svg {
    margin: 0 10px
}

#mobile-header .menu-toggle {
    -webkit-box-flex: 0 !important;
    -ms-flex: 0 0 !important;
    flex: 0 0 !important;
    margin-left: auto;
}

[Theresia]

Hi David,

Thank you for your help, i am very happy.

Regards Theresia

[David]

That’s great to hear. Glad i could help

[Author]

Posts