Skip Navigation

[Resolved] Want to float menu item to right

This thread is resolved. Here is a description of the problem and solution.

Problem:

1. I want to float this menu item to the right side of the screen.
2. I want the menu item 'Contact' to stay visible when the rest of the menu collapses.

Solution:
Q1) It needs custom CSS codes, for example
https://toolset.com/forums/topic/want-to-float-menu-item-to-right/#post-901456

Q2) The menu item "Contact" is in the "collapses" DIV tag, so when you are using mobile devices, the DIV tag is not visible, as a result, all items insider the DIV tag are not visible too, including item "Contact".

There isn't good workaround with CSS codes, you can setup another static HTML link as "Contact", and put it outsider the menu.

Relevant Documentation:

This support ticket is created 6 years, 7 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Hong_Kong (GMT+08:00)

This topic contains 4 replies, has 2 voices.

Last updated by Robert Campbell 6 years, 7 months ago.

Assisted by: Luo Yang.

Author
Posts
#901363

If you have a look to hidden link

I am trying to do two things to the menu item 'Contact'.

1. I want to float this menu item to the right side of the screen. I tried:-

li#menu-item-85 {
float:right;
}

Although I can see the float:right when I look at the inspector, it has no affect on the menu item.

2. I want the menu item 'Contact' to stay visible when the rest of the menu collapses.

I would appreciate your help with these issues.

Regards

Robert

#901456
float-menu.JPG

Dear Robert,

Please try below CSS codes:

ul.navbar-nav{
width:100%;
}

See screenshot: float-menu.JPG

#901756

Dear Luo

Thanks for your help. The CSS code you suggested fixes the first issue.

My second issue was to get the menu item 'Contact' to stay visible when the navbar collapses on mobile devices. Is this possible?

Regards

Robert

#901817

There isn't such a built-in feature within Toolset plugin.

The menu item "Contact" is in the "collapses" DIV tag, so when you are using mobile devices, the DIV tag is not visible, as a result, all items insider the DIV tag are not visible too, including item "Contact".

There isn't good workaround with CSS codes, you can setup another static HTML link as "Contact", and put it outsider the menu.

#902627

Hi Luo

Your suggestion works just fine.
Thanks for your help to solve my issues.
Regards
Robert