Solved

Using css to move a class to the left of its current position

Posted on 2013-06-05
4
292 Views
Last Modified: 2013-06-05
Hi

I'm trying to move a menu to the left, and I think what I am missing in my css are the proper positioning/addition of the "Class" dots ".".

Here's a shortened URL to the site:

Link to page with menu

The menu is on the upper right and is controlled by the following in the html:

<ul class menu nav-pills _topMainRowbyMenu hidden-phone">

Open in new window


Here's the css I have so far, and it is not affecting anything at all:

ul.menu nav-pills _topMainRowbyMenu hidden-phone {
margin-left: -100px;
}

Open in new window


What mods do I have to make to the above to get it to work -- that is, move the top right menu a bit to the left.

Thanks

Rowby
0
Comment
Question by:Rowby Goren
  • 3
4 Comments
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 39222643
Change this on line 203 of rt_leviathan-custom.css
ul.menu.nav-pills._topMainRowbyMenu {
  margin-left: 100px;
}

Open in new window

0
 
LVL 54

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 39222658
The reason your code does not work is you left out the .'s this should also work

ul.menu nav-pills._topMainRowbyMenu.hidden-phone {
margin-left: -100px;
}

Although you might find using a negative margin moves the box 300px to the left of where it is now - because a margin is already defined on the style in my earlier post.

Unless there is a reason not to change this style then my earlier post is the correct solution.
0
 
LVL 9

Author Closing Comment

by:Rowby Goren
ID: 39222695
Thanks, Julian.

I  went ahead and did the negative position.

Rowby
0
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 39222755
You are welcome - thanks for the points.
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

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

813 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now