Archived

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

  • 0

Best Css Practises


Question

Posted · Report post

I’m going to use the custom menu widget in the content sidebar and locate the sidebar just above my content. However I need the menu items to be listed in a single horizontal line. I was just wondering what CSS would be best to use?

 

.widget ul li {

    float: left;

}

 

or

 

.widget ul li {

    display: inline;

}

 

Here’s a link to my site and the page I’m using this menu on.

http://www.priceofmilk.co.uk/features/chris-rea-vs-lucy-rose-driving-home-for-christmas

 

Any advice would be much appreciated.

Share this post


Link to post
Share on other sites

9 answers to this question

Posted · Report post

If you inspect your menu, you will notice that each of the menu items is given a unique class. For example, the Editorial Team has the following class:

 

menu-item-7784

 

So you can use this to style the menu items.

 

Example

 

.menu-item-7784 {
background: red;
}


.menu-item-7784 a {
color: white;
}

Share this post


Link to post
Share on other sites

Posted · Report post

The second code would be best.

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks for the reply.

 

As I’m going to be using a number of different menus i need to be able to target one particular menu and i was wondering which class I could use? I’m using firebug to find the correct one and using the customize plugin but I’m not having any luck.

 

Obviously .widget ul li will change widgets contained within the sidebar area but i need to locate the specific widget menus I’ll be using within the sidebars

 

Ive tried .menu-about-menu-container but that didn’t affect it.

 

http://www.priceofmilk.co.uk/about

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

 

I don't see any menus in your sidebar, have you disabled the widget ?

Share this post


Link to post
Share on other sites

Posted · Report post

Hi sorry I dont think i explained it as well as i could have. Im basically using the Universal Sidebar above the content and then using the Custom Menu widget within this sidebar. So the menu im looking to edit on the About page (http://www.priceofmilk.co.uk/about) is the menu above the content that contains: Editorial Team, Contribute to DYC and Submissions. Its currenlty displayed in a vertical list but i would like to edit this, ill be using different custom menus on different pages so I need a way to edit them on an individual basis.

 

Is there an easier way to set a secondary navigation? I know its possible do set Secondary Nav on pages however I would also need a way to set a Secondary Nav on category pages and Single Post pages.

 

Structure Example

 

Parent Page (Main Nav)

- Child Page (Secondary Nav)

- Child Page (Secondary Nav)

- Child Page (Secondary Nav)

 

Parent Category (Main Nav)

- Child Category (Secondary Nav)

- Child Category (Secondary Nav)

- Child Category (Secondary Nav)

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks, using the id's ive managed to achieve the layout i need with the menu items in a horizontal line.

 

Im using the following css

 

.menu-item-7784 {
float: left;
}

.menu-item-7785 {
float: left;
}

.menu-item-7783 {
float: left;
}

 

 

but I was wondering if i could just combine it to something like this

 

.menu-item-7784 .menu-item-7785 .menu-item-7783 {

float: left;

}

 

Ive tried various combinations but the only CSS i can get to work is the first set of code where they are not combined.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi

Please you can try with

 

.menu-item-7784, .menu-item-7785, .menu-item-7783 {float: left;}

Share this post


Link to post
Share on other sites

Posted · Report post

Use the class instead of the ID, as ID can over power everything else. Also Batman's suggested code above should work.

 

I recommend if you need further assistance with CSS, you visit the W3 Schools website - http://www.w3schools.com/css/

Share this post


Link to post
Share on other sites

Posted · Report post

Brilliant thanks, I had missed out the commas which is why it didnt work i guess,

 

Thanks for the help

Share this post


Link to post
Share on other sites