- This topic has 12 replies, 2 voices, and was last updated 7 years, 10 months ago by
.
-
Posts
-
Hi GP team,
Finally i got my logo almost ready so im beginning to adjust the headers and navigations. however im running into a few issues i hope you can answer.
1. I can add a svg logo for both sticky nav, normal nav except frontpage. I’ve got an Element with <!– page header –> under Page Hero to make the nav transparent and merge with page hero. When im setting logo to be on sticky + static in the customiser it reuses the both places, but i actually dont want that. Im aiming for a white logo on the frontpage or any page thats ‘transparent’ with hero and colored logo on stcky + all other pages. When testing with Logo uploads in the Site Header under Elements, its hidden or placed wrong besides the other logo i have already uploaded. When im resizing the browser for tablet or mobile it is unhidden. Just not on desktop. Got any idea?
2. Im trying to center the logo on mobile and tested with the css from this: https://generatepress.com/forums/topic/mobile-logo-centred/page/2/. Sadly without luck. Got any advice?
3. There are too much space between the search icon and Hamburger menu. Can i reduce spacing between them? It’s something with padding-left: 30px; but im not sure where to put the css and if i should otherwise try to reduce the space in like the customiser etc.
4. I want to create a ‘user’ menu that is part of the primary navigation on desktop. It currently is, but when on mobile, i want to replace the menu with a User icon ON the primary Nav and then somehow remove the menu item from the slide-out. Something like this: https://www.hitched.co.uk/.
4.1 If thats not possible, can i make some sort of “seperation” of the primary nav and create a user menu in WP admin, but still show them both on the Primary Navigation?
Something like this: https://www.hitched.co.uk/ on desktop. There is a logo and menu to the left and My wedding planner to the right, but its still on the primary Nav. That site also scales very well.5. And for now, last question. 🙂 When scaling my site between desktop and mobile, the menu jumpbs down on a new line in the navigation. Its not compressing to a mobile menu with hamburger icon soon enough etc. How can it be avoided?
Lead Developer
Hi there,
1. I’m not too sure what you mean here. Your logo set in the Customizer will always show unless you set a different one inside your Element. If you set a different logo in the Element, it will show on the transparent header (for example). Then your Customizer logo will show in the sticky navigation etc.. Let me know if that’s not what you mean.
2. We should be able to do this with some CSS. How do you want them ordered? Mobile toggle + logo + search icon?
3. You don’t want to reduce it too much, as it will make it harder for the user to tap the icons on mobile. However, you can try this:
#mobile-header .search-item a { padding: 0 10px; }4. Separating the two like I mentioned in #2 might be the answer here?
5. You can initiate the mobile header sooner with this code: https://generatepress.com/forums/topic/mobile-header-size-tablet-view/#post-541540
Just adjust the 1024px value 🙂
Thank you Tom!
1. I’ve just had succes with this. yay!
2. Im thinking: Mobile toggle (left) – Logo (Center) – Search Icon and User icon (right).
2.1 Is it possible to add a custom user menu with icon here?3. It does reduce the spacing abit, but looking into chrome inspector, this is the one i should ajust.. I think..
@media (max-width: 768px)
.main-navigation .main-nav ul li a, .menu-toggle, .main-navigation .mobile-bar-items a {
padding-left: 30px;
padding-right: 30px;
}Im not sure its the best way to just paste this into the Extra CSS in the customizer, because i dont know if it also reduces other elements somewhere else?
4. Im not completly sure what you meant with #2 besides order of the icons and logo. Is it somehow possible to collapse the My wedding planner menu into a separate user menu icon on mobile?
5. Ok, i will test it when im getting closer to a more final menu.
2. You can use this CSS:
#mobile-header .menu-toggle { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } #mobile-header .site-logo { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; margin-left: auto; } #mobile-header .mobile-bar-items { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; }2.1: You can add your own custom HTML into the mobile header like this: https://docs.generatepress.com/article/mobile-header/#adding-html-inside-the-mobile-header
3. I don’t really suggest reducing that padding, as it will make the tap target smaller for users on mobile, which can really hurt UX.
Let me know if the above gets us closer to what you need 🙂
Again thank you for the big help! My icons are now ajusted correctly.
Regarding 2.1. I have now created a menu in theme locations, assigned a menu for it. You said i should add some html, so i did 🙂
This ended up in the functions:
/* Custom menus */
function wpb_custom_new_menu() {
register_nav_menus(
array(
‘user-custom-menu’ => __( ‘User Custom Menu’ ),
‘extra-menu’ => __( ‘Extra Menu’ )
)
);
}
add_action( ‘init’, ‘wpb_custom_new_menu’ );/* Navigaiotn */
add_action( ‘generate_inside_mobile_header’,’tu_mobile_header_html’ );
function tu_mobile_header_html() { ?><?php
add_filter( ‘generate_mobile_header_theme_location’, ‘generate_change_mobile_header_menu’ );
function generate_change_mobile_header_menu()
{
return ‘user-custom-menu’;
}?>As you can see, i’ve added the menus, added the user icon to the mobile navigation, and then i came to a hold. How do i enable slideout menu for that fa-user icon with the user-custom-menu, sliding in from right?
3. I do not agree fully on this matter. Im aware of UX is a big part. However, i have studied mobile websites for some of the biggest companies in my country and most of them use less space to fit in the “standard” navigaiton menu. That means they use less space on buttons than GP theme. Some of those companies are banks, which rely heavily on good UX experience.
Im not sure if you have tested it on an iphone 7 for example, but the icons are taking to much space. I got big thumbs, and after ajusting the icons, i still dont have an issue with it.. (some bias may apply) 🙂 Besides that i made some adjustments for smaller screens but i can still fit in 3 icons and quite big logo without affecting ux.. not that much though..2.1. Ah, you’re wanting to add a custom menu into the mobile header bar? Any reason for that other than just adding some simple HTML?
3. The Google mobile friendly test will actually spit out warnings if it detects small tap targets. However, you can use this CSS:
.main-navigation .mobile-bar-items a { padding-left: 30px; padding-right: 30px; }Adjust the values as needed 🙂
2.1 im not completly sure what you mean by simple html. Is it a list thing you are thinking about? How do i inherit the slideout menu that GP Uses?
Im also in need of a furth menu for a business area so i would like to just control it from wp menus.
Is there an example of what you’re wanting to do with the mobile header? That way I’ll be able to better help with the easiest method 🙂
I just want a slideout menu when pressing the user icon. That menu contains the menu elements ive create and assigned to user-custom-menu. Just like the slideout menu under theme location for GP. I just want it to slide out on the opporsite side.
Regarding the position of the logo in center. is it possible to keep it positioned center, when you have 3 icons, one icon to the left and two icons to the right? Right now the logo is pushed towards left side since its needs to be centered accordingly to the 3 icons. (menu toggle – Logo – Search – User)
Ah, it’s not possible to have two separate slideout navigations by default. Doing that would likely take a considerable amount of customization. I can take a look at it this week to see if it’s possible within the framework we’ve already built, but I’m not 100% sure it will be.
To do that, you need to replace this:
#mobile-header .menu-toggle { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }With this:
#mobile-header .menu-toggle { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; margin-right: auto; }Then add this:
#mobile-header .site-logo { position: absolute; left: 50%; margin-left: -100px; }Thank you Tom! I would love that! Do you have any other ideas how it could be solved? I need a second menu for the user options, but im guessing i have to create a custom menu for that specific case for now.
Looked into this more today. Unfortunately it would involve a considerable amount of custom coding to use the built in slideout code to build a separate slideout. A little too much code for the forum here.
It may be worth looking at a solution like this: https://shiftnav.io
- You must be logged in to reply to this topic.
