The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Navbar name change issue.

4 posters

Go down

Solved Navbar name change issue.

Post by sonyman Sun 9 Nov 2014 - 21:08

I changed the "messages" link on the navbar that says "You have no new messages" to just say "Inbox". But the code I used hides the "You have no new messages" and puts "Inbox" in its place, which causes size problems, since "You have no new messages" is a lot longer than "Inbox". The length of the previous wording stays even after the edit.


Ex: Before and After.

Navbar name change issue. Screen13

Navbar name change issue. Screen14

Code I used to change the name.
Code:
  #page-header > div.navbar > div > ul > li:nth-child(9) > a {
    visibility: hidden;
   position: relative;
        width: 2px;
}
    #page-header > div.navbar > div > ul > li:nth-child(9) > a:before {
    visibility: visible;
   position: relative;
   top: 0;
   left: 0;
   content: "Inbox";
}

http://gjtesting.forumotion.com/
My question, is there a way to fix this issue, or is it not possible. I realize that the code is pretty much a CSS hack so i'm not so sure it would work.


Last edited by sonyman on Sun 9 Nov 2014 - 21:17; edited 2 times in total
sonyman
sonyman
New Member

Posts : 21
Reputation : 1
Language : english

Back to top Go down

Solved Re: Navbar name change issue.

Post by SLGray Sun 9 Nov 2014 - 21:16

So the issue only happens when you have a new private messages?


Navbar name change issue. Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51463
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: Navbar name change issue.

Post by Mati Sun 9 Nov 2014 - 21:20

Hello,

Try this Javascript code

Code:
$(function(){
        $('a.mainmenu:contains("You have no new messages")').text('Inbox');
        });

        $(function(){
        $('a.mainmenu:contains("You have 1 new message")').text('Inbox New');
        });

This will change the text that says "You have no new messages" to Inbox, and when "You have 1 new message" to Inbox New.
Mati
Mati
Hyperactive

Posts : 2020
Reputation : 330
Language : HTML, CSS & JavaScript
Location : Forum Services

https://forumservice.forumotion.com/

Back to top Go down

Solved Re: Navbar name change issue.

Post by Ange Tuteur Sun 9 Nov 2014 - 23:21

Hello sonyman,

Have you tried setting the font-size to 0 on the texts you don't want to show ?
Code:
#page-header a.mainmenu[href*="privmsg"] { font-size:0 }
#page-header a.mainmenu[href*="privmsg"]:after {
  content:"Inbox";
  font-size:11px;
}

Then set the font-size on the new content.
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Navbar name change issue.

Post by sonyman Mon 10 Nov 2014 - 1:05

Thanks guys. I went with Ange's advice because i'd rather have this edit in the form of CSS code than Javascript, as I noticed sometimes when I used the javascript code to do it, it would sometimes glitch. 

Ange and Maty solved my issue. Thanks.  Very Happy
sonyman
sonyman
New Member

Posts : 21
Reputation : 1
Language : english

Back to top Go down

Solved Re: Navbar name change issue.

Post by Ange Tuteur Mon 10 Nov 2014 - 1:08

You're welcome Smile

Topic archived
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum