Archived topic
Question about mobile header
9 replies · Started by Ho on September 24, 2020
Hello,
I am having a few questions about moving the bottom-position in the mobile header.
Here is the url ---- and the header currently looks like the following pictures.
What I tried to do is that:
1. Moving the "Site Title" to the center.
2. Moving the toggle to the left.
3. Create a link for users login with font awesome icon (fa-user / something else) at the right-side of the header
(like the following picture)
I tried that for quite a while but I have no any clue :( Please give me some guide.
Thank you very much.
Hi there,
first lets add the icon to your mobile header.
You can use a Hook Element:
https://docs.generatepress.com/article/hooks-element-overview/
to insert your icon/link HTML.
Set the Hook to Inside Mobile Header.
Once thats done let me know and ill look at the CSS required to re-order the title/menu/icon.
Thank you so much for your kindly response and giving me the guide.
I have insert <i class="fa fa-user" aria-hidden="true"></i> to generate_inside_mobile_header (Element Tope=Hook). Currently the header looks like the following picture.
I am not sure if this step was done correctly. Please let me know if there is something goes wrong. The icon is showing on the header of url ----- now.
Thanks!
Looks good to me.
Try this CSS:
.mobile-header-navigation .fa-user {
order: 2;
color: #ffffff;
}Adding CSS: https://docs.generatepress.com/article/adding-css/
It works!!
Glad to hear :)
Updated: The layout looks good with using the following CSS
/* 767px and below screen sizes */
@media (max-width:767px){
#mobile-header .inside-navigation a{
display: contents;
}
/* Menu toggle */
#mobile-header a .menu-toggle{
order: 1;
position:absolute;
left:0px;
padding-left:30px;
padding-right:30px;
}
#mobile-header .inside-navigation .navigation-branding{
order: 2;
margin:0px;
}
.mobile-header-navigation .fa-user-circle{
order: 3;
color: #ffffff;
position: absolute;
right: 0px;
width: 71px;
}
}However, since I tried to make the icon "fa fa-user-circle" clickable, I have inserted
<a href="-----/"> before <i class="fa fa-user-circle" aria-hidden="true"></i> in generate_inside_mobile_header. The result is that the toggle (menu) and user-icon are both linking to the login page.
May I ask is there another code I need to insert into the element-hook in order to keep "toggle" as a menu?
Thanks
You need to close the </a> tag you have added to the icon.
eg.
<a href="https://m5music.hk/login/"><i class="fa fa-user-circle" aria-hidden="true"></i></a>
I am very glad that you told me something what I didn't know before, and guided me step by step to achieve the issues. I really learned something here.
Thanks all of your help. The problems were solved. Appreciate!
Glad we could help :)
