The correct CSS to float main menu to left side.

This topic has 12 replies, 2 voices, and was last updated 8 years by Radu.

Author
May 22, 2015 at 12:09 #59806

ahd904
Participant

Hello team and @Laura,

Could you guide me with the correct CSS to shift the main menus to the left apart from the KLEO account menu as indicated in the attached screen shot ?

Thank you.

Attachments:
You must be logged in to view attached files.

May 22, 2015 at 12:11 #59808

ahd904
Participant

By the way the site url is http://www.ibyi.co.kr

Thank you
May 22, 2015 at 19:03 #59841

Radu
Moderator
Try like this
COPY CODE
```
.kleo-main-header .navbar-collapse {
  float: left !important;
}
```
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?
May 23, 2015 at 05:11 #59875

ahd904
Participant

Thank you @Radu but what i wanted is to make the My Account menu and the notifications from KLEO menu items to stay on the right.

Please refer to the attached image,

Could you also provide the correct CSS to make this happen ?

Thank you again,

Attachments:
You must be logged in to view attached files.
May 25, 2015 at 15:53 #60045

Radu
Moderator
Hello,

Please replace css code that I gave you before with these
COPY CODE
```
.kleo-main-header .navbar-collapse {float:none !important;} 
.kleo-main-header .nav.navbar-nav {float:none !important;}
#header.header-color .navbar-nav li:last-child {float:right;}
```
Cheers

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?
May 25, 2015 at 16:25 #60053

ahd904
Participant

@Radu,

I am still not getting the ‘My Account’ menu to float on the right side with the last child.

Can you please finish off helping this one ?

Radu, also could you tell me how can i find the exact CSS selector ? do you also use chrome tool (F12) or is there something else that you recommend ?

May 25, 2015 at 16:37 #60056

ahd904
Participant

#header.header-color .navbar-nav > #menu-item-3400 {float:right;}

i have tried this and My acoount floats to the right but i want it to be before the little Android (notification menu).

CSS is easy and hard unless i know the rules clearly.

Could you make a clear CSS for fixing all this above correctly ?

Thank you for the kind support.
May 25, 2015 at 16:40 #60058

ahd904
Participant
At the moment i have applied back to the last CSS you have given me so that you dont get confused.
COPY CODE
```
.kleo-main-header .navbar-collapse {float:none !important;} 
.kleo-main-header .nav.navbar-nav {float:none !important;}
#header.header-color .navbar-nav li:last-child {float:right;}
```
May 25, 2015 at 17:09 #60064

Radu
Moderator
Apply this css please
COPY CODE
```
.kleo-main-header .navbar-collapse {float:none !important;} 
.kleo-main-header .nav.navbar-nav {float:none !important;}
#header.header-color .navbar-nav li:last-child {float:right !important;}

#header.header-color .navbar-nav li:last-child ul.dropdown-menu {
right:0 !important;
left:auto !important;
}
```
Let me know if it works.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?
May 25, 2015 at 19:01 #60082

ahd904
Participant

This reply has been set as private.
May 25, 2015 at 19:20 #60084

Radu
Moderator
Hello,

Load this css it should works.
COPY CODE
```
.kleo-main-header .navbar-collapse {float:none !important;} 
.kleo-main-header .nav.navbar-nav {float:none !important;}
#header.header-color .navbar-nav > li:last-child {float: right !important;}
.kleo-main-header .navbar-nav .kleo-user_avatar-nav {float:right !important;}
```
Let me know if it works.

Cheers

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?
May 26, 2015 at 09:12 #60138

ahd904
Participant

@Radu

One fix is still remaining that i want to move the android icon (notification) rightside to the KLEO avatar.

Could you please refer to the attached image once more ?

The above CSS did not move the android icon to the rightside of that KLEO avatar.

Thank you.

Attachments:
You must be logged in to view attached files.

May 27, 2015 at 15:34 #60295

Radu
Moderator

Hello,

Go to menus, select the actual main menu, and switch notification with my account, my account it should be last in the menu.

Thet’s all

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?
Author

Posts