How to add some text to the left side of the magnifier ( search ) button

Hi Pratama. Here’s something you might try. Add a container for the link in header.php between the “toggle-search” and “search-expand” containers:

<div class="toggle-search"><i class="fa fa-search"></i></div>

  <!-- New Login link in topbar -->
  <div class="myLink">
    <a href="https://www.www.ads-software.com/" target="_blank">Login</a>
  </div>

<div class="search-expand">

Style it with something like this:

.myLink {
  float: right;
  margin-right: 75px;
  margin-top: -35px;
  }

The only caveat is that, on a smaller mobile device (e.g., iPhone), when you expand the menu, the “Login” floats down to the bottom menu item. Other than that, it should remain in place as the viewport is resized. Let me know how that works.

thank you it works, but just like you said, on mobile when i expand the menu, the “login” floats down to the bottom of menu. is there any way to make it stay there when on mobile mode? once again thank you

I’m sure there is more than one way to approach this but, what I finally decided to try, and appears to work, is to create two links: one for a normal screen and one for the mobile screen.

The link for the mobile screen goes inside the “nav-text” class container in header.php:

<?php if ( has_nav_menu('topbar') ): ?>
	<nav class="nav-container group" id="nav-topbar">
	<div class="nav-toggle"><i class="fa fa-bars"></i></div>
		<div class="nav-text">

		<!-- BEGIN mobile screen link container -->
		<div class="myLink2">
			<a href="https://www.www.ads-software.com/" target="_blank">Login</a>
		</div>
		<!-- END mobile screen link container -->  

		<!-- put your mobile menu text here --></div>   

	<div class="nav-wrap container">

The link for the normal screen goes between the “toggle-search” and “search-expand” class containers in header.php:

<div class="container">
	<div class="container-inner">
		<div class="toggle-search"> <i class="fa fa-search"></i></div>

		<!-- BEGIN normal screen link container -->
		<div class="myLink1">
			<a href="https://www.www.ads-software.com/" target="_blank">Login</a>
		</div>
		<!-- END normal screen link container -->  

		<div class="search-expand">
			<div class="search-expand-inner">
				<?php get_search_form(); ?>
			</div>
			</div>
	</div><!--/.container-inner-->
</div><!--/.container-->

Line up the links in the two containers:

/* link1 on normal screen */
.myLink1 {
  float: right;
  margin-right: 89px;
  margin-top: -37px;
  }
/* link2 on mobile screen */
.myLink2 {
  float: right;
  margin-right: 20px;
  }

Since the mobile link is only displayed when the screen is smaller, we only need to worry about when to display the full screen link. Display and hide it at the same time as the menu:

/* hide link1 on mobile screen */
@media only screen and (max-width: 969px) {
.myLink1 {
  display: none;
  }
/* display link1 on normal screen */
@media only screen and (min-width: 970px) {
.myLink1 {
  display: block;
  }

Give that a try and let me know how it works.

If you want to drop it into the footer you could do something like this:

/* move widget to footer on mobile screen */
@media only screen and (max-width: 719px) {
#newsletterwidget-2 {
  position: fixed;
  bottom: 40px;
  right: 5px;
  }

/* move widget to header on normal screen */
@media only screen and (min-width: 720px) {
#newsletterwidget-2 {
  position: initial;
  }

If you want to hide it you could do this:

/* hide widget on mobile screen */
@media only screen and (max-width: 719px) {
#newsletterwidget-2 {
  display: none;
  }

/* display widget on normal screen */
@media only screen and (min-width: 720px) {
#newsletterwidget-2 {
  display: block;
  }

hey bdbrown, i tried your code from the second post and encountered some problem, now my login link drops to the bottom left of the top nav menu just bellow my “Home” menu, and when i tried to apply back to your first code the login link drops bellow the magnifier button. any fix or advice? thank you

Pratama – I just looked at the code I posted above (#newsletterwidget-2) and realized it was from another topic. Sorry about that. Can you post a link to your site? Thanks.

tantular.com

I don’t see the code from my second post on your site. Do you possibly have a test version of your site that you could reinstall the code from my second post so I can see the problem?

i put the code back so you can check it out then suddenly it works, but please check my site because i don’t know why it doesn’t work before and why it’s work now :/

Odd; I can’t explain that. If the code is there, it should work. So I see the flags in the normal screen mode and that container disappears at 970px which is correct based on the css. But then I don’t see the flags again until the viewport is 720px wide. So there is a range between 970px and 720px where the flags don’t display. I was able to correct that by changing the max-width and min-width on the @media sections as follows:

/* hide link1 on mobile screen */
@media only screen and (max-width: 719px) {
.myLink1 {
  display: none;
  }
/* display link1 on normal screen */
@media only screen and (min-width: 720px) {
.myLink1 {
  display: block;
  }

If you make those two changes it should work smoothly across all viewport widths.

thank you very much bdbrown, but this what happens

flags appear in landscape mode but not appear in potrait mode
https://mobiletest.me/ipad_mini_emulator/#u=https://tantular.com

Hmmm…I just looked at your link, and the flags are displayed in both portrait and landscape. Tried swicthing modes back and forth a couple of times; they were there each time. They also display correctly here.

i check my site through your link and it seems working just fine, once again thank you bdbrown ??