Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #180519

    Hello, i want to have my navigation bar like the one here on the forum. so the Facebook and social icons are directly in the same “line” like menu and search icon. – on the right… how do i do this ? i also want to have a “like” button directly in the same line. Can you help me with this? thanks

    #180580

    Hi,

    Yesterday i wanted the same. this is what i did (working on child theme):

    . Choose the “Fixed Header with Social Icons and Additional Navigation”, the social config panel expands. Later you will use it to set up your own links, etc.
    . Get a copy of header.php and place it in your child folder, get rid of the extra header (starts on Line 87)
    . C&P this after Line 135: if(strpos($headerS,'bottom_nav_header') === false) avia_social_media_icons($social_args);
    . Modify <nav> and social styles, so it fits correctly (position, padding… nothing fancy). But make sure to target some id that will allow you to keep the correct styles on “Header with Bottom Navigation” I used this: .container_wrap_logo .main_menu { right:120px }. Also u will need to modify the top padding of #main. I used this: .fixed_header.social_header #main { padding-top:117px; }

    upload and check.

    Probably not the best or code friendly solution, but it worked. : )
    GL

    #180921

    Hi,

    how can i move my social icons from the left side to the right side. ( but not on the same line as the menu buttons)
    i am using fixed header with social icons and additional navigation…

    thank you!

    #181224

    Hi,

    I’ll add some modifications, the proposed solution fails when viewing the page on mobile devices.
    Then I remembered that CSS often makes our lives easier, so the final solution, in my case, is this:

    1. Make a copy of header.php and paste it in your child theme
    2. Copy line 100: “”
    3. Paste it on line 181
    4. Upload header.php
    5. In your child custom style sheet, paste this together with the styles necessaries to make it look good:
    6. Double check tablets resolutions, mobile, etc… and add more responsiveness if necessary

    /* Hide Header Meta from both screenreaders and browsers */
    .responsive #header_meta {
        display: none !important;
        visibility: hidden;
    }
    	
    /* All Mobile Sizes (devices and browser) */
    @media only screen and (max-width: 767px) {
    #header_main .container ul.social_bookmarks {
    	display: none !important;
       	visibility: hidden;
    	}	
    
    .responsive #header_meta {
    	display:block !important;
    	visibility:visible;
    	}
    	 }

    Upload & done.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Move social icons in the same line like "search" icon and add "like" button’ is closed to new replies.