Solved

Styling ONE Text Menu item

Posted on 2014-03-26
10
196 Views
Last Modified: 2014-04-03
Hello

I have a text menu, and I need to add a specific style to only one menu item.

I have added as many hooks to the html as I could, so I think the css adjustments I need can be done without problem.

Of course I need you help to do that.

In my next comment I will provide the link to the test site.

Thanks for any help you can provide!

Rowby
0
Comment
Question by:Rowby Goren
  • 8
  • 2
10 Comments
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39957208
Okay!

Here's the link: Link to temp site

The link I need to style is the top right "LOGIN" menu item.  I need to adjust the height and width as well as move the link further to the right.

You will see via firefox the link has all kinds of tags to hopefully make this happen.  
<li class="maximenuck item166 last level1 RowbyCssLI" style="z-index : 11995;" data-level="1">
<a class="maximenuck LiLogin" rel="lightbox" title="LogIN" "

Open in new window


That's it!

Thanks

Rowby
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39957258
.maximenuck.last.level1{
/* everything here */
}

Open in new window

0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39960718
Hi Gary

I missed your comment.  I'll work on it tomorrow.

Thanks!
0
Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

 
LVL 9

Author Comment

by:Rowby Goren
ID: 39961828
Hi Gary

Hmmmm.   I added this to rowbystyle.css".  It didn't seem to affect the red logon button.   I can't see it in firebug either...

.maximenuck.last.level1 {
padding-left: 20px;
    padding-right: 24px;
      margin-left: 21px;
    font-size: 200px; 
}  
  

Open in new window


Link to page
0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 500 total points
ID: 39961854
Cannot see that css class anywhere, plus it wouldn't work on that page now as you have another link at the end, meaning the iframeLogon would get the css applied to it.
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39961903
OK

i'll wait until I move the solution from my other EE question over to this site.  

That should be later today.

Stay tuned :)

Thanks!

Rowby
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39972520
Hi Gary

Now that the modal issue has settled down, is there still a way to individually style the login button.

The HTML via firebug is as follows:  
li class="maximenuck item200 last level1 popup" style="z-index : 11995;" data-level="1">
<a class="maximenuck LiLogin" rel="lightbox" href="https://list.drivehubber.com/hubber/Login.aspx">
<span class="titreck">LOGIN</span>
</a>

Open in new window

0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39973160
Stay tuned. I may be able to do much of this via the menu's parameters.....
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39976951
Hi

I was able to go into the menu module's enhanced parameters and adjust the spacing etc.

With some help from the menu module's developer I was able to do some additional modification in the php.

SO now it is all looking very nicely!

Rowby
0
 
LVL 9

Author Closing Comment

by:Rowby Goren
ID: 39976954
Thanks Gary,

Your comments were all a part of the troubleshooting that led to the solution.

Rowby
0

Featured Post

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

"I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

786 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question