Archived topic
menu on the left side !!
11 replies · Started by Theresia on June 20, 2018
Help please,
i have Theme Flint Skin Navigator installed and want the menu on the left side !!
best regards Theresia
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?
Yes, the menu is on the left side.
I would like it on the right side!
Regards Theresia
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; */
}
Hi David,
Many Thanks. It is working.
Regards Theresia
You're welcome.
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
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?
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
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;
}
Hi David,
Thank you for your help, i am very happy.
Regards Theresia
That's great to hear. Glad i could help