[Resolved] Question about mobile header

Home Forums Support [Resolved] Question about mobile header

Home Forums Support Question about mobile header

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1456797
    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.

    #1456883
    David
    Staff
    Customer Support

    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.

    #1457309
    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!

    #1457356
    Leo
    Staff
    Customer Support

    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/

    #1457408
    Ho
    #1457670
    Leo
    Staff
    Customer Support
    #1457818
    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

    #1458166
    David
    Staff
    Customer Support

    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>

    #1458864
    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!

    #1458868
    Leo
    Staff
    Customer Support

    Glad we could help πŸ™‚

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.