Archived

This topic is now archived and is closed to further replies.

  • 0

Move Single Navbar Menu Item to Right


Question

Posted · Report post

Hi. I'd like to move a single nav bar item to the right. 

 

this is what I have:

 

li#menu-item-114{float:right;font-size:18px;color: #225e20;
font-weight:bolder;}
li#menu-item-114 a {float:right}
.navbar .navline li#menu-item-114 a {float: right;}
.navbar .navline li#menu-item-114  {float: right !important;}
 
However, the above isn't working. Any thoughts?
I just want one menu item on the navbar to float right. 
I don't want to use margin as it will mess up in responsive mode. 
 
 

Share this post


Link to post
Share on other sites

9 answers to this question

Posted · Report post

oh wow. got the answer. 

I added this to my custom css:

 

.navbar .navline{width:100%;}
 
and this is what I already had to make that one item float right:
li#menu-item-114{float:right;font-size:18px;color: #225e20;
font-weight:bolder;}
li#menu-item-114 a {float:right}
.navbar .navline li#menu-item-114 a {float: right;}
.navbar .navline li#menu-item-114  {float: right !important;}
 
Yay! Let's close this! 

Share this post


Link to post
Share on other sites

Posted · Report post

Hey James. That's not what I mean. 

I want only one nav button to be on the right side of the menu. 

Does this make sense. 

I want to separate it from the rest of the menu, not text align within the menu item. 

Basically it's a phone number so want it on the right: ) 

Share this post


Link to post
Share on other sites

Posted · Report post

any thoughts?

Share this post


Link to post
Share on other sites

Posted · Report post

Hey there, glad you got it sorted. Thanks for posting the answer.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi gayatriom

 

Can you provide a link to your website please.

:)

Share this post


Link to post
Share on other sites

Posted · Report post

ceosearch.com

Share this post


Link to post
Share on other sites

Posted · Report post

Sorry gayatriom, i don´t find the way.

:(

Please wait for a Moderation Team´s reply

Share this post


Link to post
Share on other sites

Posted · Report post

oh ok. thanks. 

Share this post


Link to post
Share on other sites

Posted · Report post

Hi there,

 

Looking at those three items in the top right, each container is flush next to each other. Its the padding inside each tab which is making it look like they are separate. Even if you align the text right, it won't show a change inside the tab as the padding is holding that text in the first button in place. You'd need to remove the right padding inside the first tab to get it to move over. That won't affect the responsive side of things as it will stay inside the container, even though the padding is removed.

Share this post


Link to post
Share on other sites