Social links in topbar

  • Resolved wp169

    (@wp169)


    9 years, 7 months ago

    I am trying to put social links in the topbar (just left of search icon). I am able to successfully do it mobile mode but the links are not visible when width > 721px. I updated child copy of header.php

    <nav class="nav-container group" id="nav-topbar">
	<div class="nav-toggle"> <i class="fa fa-bars"></i></div>
	<div class="nav-text"> <strong><?php alx_social_links() ; ?> </strong><!-- put your mobile menu text here --></div>

    Will appreciate any help to show the same in desktop mode also.
    Thanks!

Viewing 14 replies - 1 through 14 (of 14 total)

  • Hi Wp169,

    The “nav-text” set for mobile screen by default, the original code:

    .nav-text { display: none; float: right; font-size: 16px; line-height: 24px; padding: 13px 20px; }

    Can you modify the code in your Child Theme:

    .nav-text { display: block; }

    Thread Starter wp169

    (@wp169)

    Hi adiazudin,

    Adding the code you mentioned the social links are visible now.
    However when you re-size the the browser width the links overlap with the search icon (it happens 1020px and 1450 px).

    how can I avoid search icon to overlap?

    Thanks for your help!

    Can I visit your site?

    Thread Starter wp169

    (@wp169)

    It is test.ruchiskitchen.com

    Firstly, you add this code in PHP.

    <div class="topbar-social"><?php alx_social_links() ; ?></div>

    Use this for CSS:

    .topbar-social {
  display: block;
  position: absolute;
  top: -40px;
  right: 68px;
}

    Let me know the result.

    The previous “nav-text” can change back to “display: none”

    Thread Starter wp169

    (@wp169)

    I did all the 3 steps but now the links are not visible in desktop or mobile mode. I added topbar-social div (mentioned above) under the container group.

    <nav class="nav-container group" id="nav-topbar">

    Let me know what else I can try.

    thanks!

    You put the div class here, below container inner.

    <div class="container-inner">
  <div class="topbar-social"><?php alx_social_links() ; ?></div>
  <div class="toggle-search"><i class="fa fa-search"></i></div>
  ...

    It will shows the links on your desktop version.
    The reason why we not use “nav-text” because it effects to the header and footer too.

    Thread Starter wp169

    (@wp169)

    It worked, Thanks!

    Your welcome.

    hello , I’m new to wordpress , how to insert links?
    you can help me?

    https://it.tinypic.com/r/2d2havd/8

    i see this in my page

    Hi Six73, it’s better you open a new thread and I can help you. This topic here already marked as resolved.

    ok thanks

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Social links in topbar’ is closed to new replies.