Archived topic
Primary Navigation Issues
7 replies · Started by Michelle on May 19, 2020
Hi, having problems with Primary Navigation position as it overlaps with the Elementor button on a smaller laptop screen.
On a large screen looks ok.
Is there a way you could actually include a button option as part of the menu like other themes do? Have wasted a few hours to figure out how to put a button in the primary nav menu. Adding a seperate button from elementor was the best I could come up with.
I added the code here to Simple CSS but it didn't do anything. Button to Google
https://docs.generatepress.com/article/adding-buttons/
I am not good with code so if there is a way just to space between elementor button and the menu so they don't overlap would be best.
Navigation Location and Navigation Position no longer exists within your theme.
https://docs.generatepress.com/article/navigation-location/
Sorry I am completely lost and wasted hours upon hours with what is a simple task in other themes.
If you can please help it would be much appreciated.
Thanks
Hi there,
question - how should that button be displayed on Mobile devices?
Let me know then i can provide the best solution to make all of it work correctly.
Hi, probably it will disappear on mobile and I will have a phone icon instead for mobile e.g. top left.
Do you think it is better to have it in the header to prevent overlapping issues?
If so, can you please explain in more detail exactly what code I have to add and exactly where.
Thanks very much
Right so lets do one at a time. For reference this article explains how to make a Menu item look like a button:
https://docs.generatepress.com/article/adding-buttons-navigation/
To save you some time i created the CSS here:
.main-navigation .main-nav ul li.nav-button a {
background-color: #e8a240;
border-radius: 50px;
font-weight: 700;
line-height: 40px
}
.main-navigation .main-nav ul li.nav-button:hover a {
background-color: #e88700 !important;
color: #fff !important;
}In point 1 of that document it explains how to add the nav-button custom class. In the CSS field copy and paste this instead:
nav-button hide-on-mobile
Once thats done we can look at adding a call icon in the Mobile Header
Thanks so much for that. That has worked :-)
Do you know how to add the icon to the header & then hide on mobile?
I may be using the Menu as a header currently or one that came with the theme. There is no Header active under theme builder.
Thanks
Is this the phone icon ? Where should it be positioned as part of the button ? Let me know :)
Hi David, I don't think it would be part of the button. It would be an icon that displays on mobile in the header instead of the desktop button. e.g. top left corner. Have seen it on quite a few sites. Here's an example (check on mobile): https://kingkong.com.au/ Please let me if you have any idea how to achieve it. Thanks
aah ok. This would be my approach.
1. In Customizer > Layout > Header - enable Mobile Header and give it a mobile logo, this will provide us a mobile specific element to adapt.
2. Create a new Hook element in Dashboard > Appearance > Elements
2.1 Add this to the text area in the hook ( be sure to update the tel+ ):
<a class="mobile-call-button" href="tel:+12345678">
<svg aria-hidden="true" role="img" height="1em" width="1em" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2 378.1.6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-18.6-23.4z"></path></svg>
</a>2.1 Select inside_mobile_header hook from the hook list.
2.2 on Display Rules - select Entire Site.
Once its in place i can provide some CSS to style the mobile header to suit.
