Layerslider text box right margin - Support | Kriesi.at

Viewing 22 posts - 1 through 22 (of 22 total)

Author

Posts
September 16, 2025 at 11:55 am #1489275

fanlokbun
Participant

In layerslider I want a text box center. Whatever I do it snaps to the right of the page. There is only an Position left top option. How do I have a text box that I can position where I want it?
Thanks

September 17, 2025 at 5:09 am #1489295

Ismael
Moderator

Hey fanlokbun,

Thank you for the inquiry.

In the Layer Settings, go to Style > Size & Position, then click the Position to Horizontal Center and Position to Vertical Center buttons, as shown in the screenshot below.

Best regards,
Ismael

September 17, 2025 at 10:17 am #1489308

fanlokbun
Participant

Hi Ismael,

Thanks for that I must still be doing something wrong. I can move it using those controls but it changes the font sizes. As soon as I correct the fonts it snaps back to the right. Any changes to the text box shape changes the font size too and it tries to get in one line. I don’t understand the logic of how it is supposed to work. I just want a rectangle box with text in 5 lines that I can position centre top.

Many thanks

September 18, 2025 at 5:14 am #1489336

Ismael
Moderator

Hi,

Thank you for the update.

We replaced the Text layer with HTML and adjusted the content slightly to break it into multiple lines. You can now try adjusting the styling, and once you’re done, snap it back to vertical and horizontal alignment.

Best regards,
Ismael

September 18, 2025 at 12:33 pm #1489355

fanlokbun
Participant

Thanks Ismael
If I try and change the size the top line does it’s own thing. Snapping back to vertical and horizontal didn’t change it. See screenshot.
Thanks

September 19, 2025 at 4:46 am #1489383

Ismael
Moderator

Hi,

Try applying a specific width to the html layer, then enable the Text & Typography > Word Wrap option. You can also set this in the Advanced > Custom CSS field.

— https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_text/Wrapping_breaking_text#breaking_long_words

Best regards,
Ismael

September 19, 2025 at 10:56 am #1489391

fanlokbun
Participant

Thanks Ismael I think I have got the hang of it now.
Quick add on question (sorry). How do I add a transparent navigation menu to the top that is different from the rest of the site?
Thanks again.

September 22, 2025 at 5:44 am #1489443

Ismael
Moderator

Hi,

Thank you for the update.

Have you tried using the Fullwidth Submenu element? You can also create it manually above the current Layer Slider, but that would require some customization. Let us know if you have more questions.

Best regards,
Ismael

September 22, 2025 at 11:14 am #1489458

fanlokbun
Participant

Thanks Ismael that works! How do I change the background transparency 50% so the slider shows through?
Cheers

September 22, 2025 at 11:16 am #1489459

fanlokbun
Participant

… actually I don’t think it is floating over the sider. It needs to do that too.
Thanks

September 23, 2025 at 5:17 am #1489475
Ismael
Moderator
Hi,

You can add this css code to make the background transparent and have the menu float above the slider.
```
@media only screen and (min-width: 768px) {
  /* Add your Desktop Styles here */

  #top .av-submenu-container.av-mfuwd2dc-fbfd62110b190173ec9e1a9c9af59e82 {
    position: absolute;
    background-color: #4f5b33a3;
  }

  #top .av-submenu-container.av-mfuwd2dc-fbfd62110b190173ec9e1a9c9af59e82 .av-subnav-menu li a {
    background-color: transparent;
  }
}
```
Best regards,
Ismael
September 23, 2025 at 12:03 pm #1489493

fanlokbun
Participant

That’s great thanks Ismael. I tried adding css under /* Add your Desktop Styles here */ but I cant get it to work. Please can you give me a quick example changing the hover colour and I can work it out from there.
Thanks again

September 24, 2025 at 5:48 am #1489512
Ismael
Moderator
Hi,

Are you trying to change the color of the menu items on hover? Try to add this css code:
```
#top .av-submenu-container.av-mfuwd2dc-fbfd62110b190173ec9e1a9c9af59e82 .av-subnav-menu li:hover a {
    color: #f3ab29;
}
```
Best regards,
Ismael
September 24, 2025 at 11:04 am #1489521

fanlokbun
Participant

Great thanks Ismael!
Good choice of colour.

September 24, 2025 at 11:07 am #1489522

fanlokbun
Participant

Sorry one more thing. When it switches to mobile it loses transparency. How do I keep the same transparency as in full screen?

September 25, 2025 at 6:17 am #1489551
Ismael
Moderator
Hi,

Add this css code to adjust the background color on smaller screens:
```
@media only screen and (max-width: 989px) {

  /* Add your Mobile Styles here */
  .responsive #top .av-submenu-container {
    position: absolute !important;
    background-color: #4f5b33a3;
  }

  .responsive #top .socket_color .mobile_menu_toggle {
    color: #ffffff;
    background: transparent;
    border: 0;
  }

  .responsive #top .socket_color .mobile_menu_toggle:hover {
    color: #f3ab29;
  }
}
```
Best regards,
Ismael
September 25, 2025 at 11:37 am #1489567

fanlokbun
Participant

Sorry Ismael that isn’t working. It is still opaque.
Thanks

September 26, 2025 at 5:49 am #1489582

Ismael
Moderator

Hey!

We adjusted the css selector a bit. It should be working correctly now. Please make sure to purge the cache or remove browser history before checking.

Regards,
Ismael

September 26, 2025 at 10:56 am #1489594

fanlokbun
Participant

Thanks Ismael that’s great. There are a couple of places next to where there are submenu items that show the page through the menu in mobile mode. Any idea how to stop this?
Thanks

September 29, 2025 at 6:31 am #1489635
Ismael
Moderator
Hi,

Did you add this css code somewhere? It limits the width of the submenu, which also affects the mobile menu.
```
ul.sub-menu {
    width: 270px !important;
}
```
Removing the css rule should make the element display properly.

Best regards,
Ismael
September 29, 2025 at 1:06 pm #1489642

fanlokbun
Participant

Well spotted thanks Ismael
You can close this thread.
Thanks again

September 30, 2025 at 6:40 am #1489672

Ismael
Moderator

Hi,

Glad we could be of help. Please let us know if you have more questions. Have a nice day.

Best regards,
Ismael
Author

Posts

Viewing 22 posts - 1 through 22 (of 22 total)

The topic ‘Layerslider text box right margin’ is closed to new replies.