[Resolved] Question about mobile header

[Ho]

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.

https://ibb.co/cNZj0FM

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)

https://ibb.co/SwFZhxm

I tried that for quite a while but I have no any clue 🙁 Please give me some guide.

Thank you very much.

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ho]

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.

https://ibb.co/9gLWRH4

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!

[Leo]

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/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ho]

It works!!

https://ibb.co/brfMQ76

[Leo]

Glad to hear 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ho]

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

[David]

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>

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ho]

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!

[Leo]

Glad we could help 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts