How to Move the Search Bar

Name: FriendRewind
Author: FriendRewind

1 month ago - by Kayla⟡ - Navigation - used 1 times

Moves the FriendRewind search bar from its normal position.

Change the two numbers in translate(0px, 0px):

First number moves it left or right.
Second number moves it up or down.
Positive first number = right.
Negative first number = left.
Positive second number = down.
Negative second number = up.

Example: translate(-100px, 40px) moves it 100 pixels left and 40 pixels down.

CSS Code

Copy this and paste it at the bottom of the Advanced CSS tab in your layout editor, then save. Leave the Visual Builder's existing CSS in place - add this under it, don't replace it.

<style>
/* Move the FriendRewind search bar */

nav .top {
  overflow: visible !important;
}

nav .top .center,
nav .top form,
nav .top form[action*="search"] {
  display: block !important;
}

nav .top .center {
  position: relative !important;

  /* First number: left/right
     Second number: up/down */
  transform: translate(0px, 0px) !important;

  z-index: 100 !important;
}
</style>

How to use: copy the CSS above → open your layout editor → switch to the Advanced CSS tab → paste at the bottom (keep the Visual Builder CSS above it) → save → refresh your profile. If the element also has HTML, paste that into About Me or at the bottom of Advanced CSS after the CSS. Elements stack - you can combine as many as you like. New to CSS? Read the Custom Code Tutorial.

More in Navigation

« Back to Navigation | « All Profile Elements