Jump to content


Photo
- - - - -

Sidebar list not vertical


Best Answer cjr , 11 March 2013 - 11:37 PM

I appreciate the quick response but I was already using a Custom Menu in the sidebar. With a bit of trial-and-error, it turns out that I needed to add the following to change the style:

 

#menu-about_menu {display: inline;}

 

I had modified the CSS previously to change the background and font color with/without mouse hover and, in doing so, it seems the menu display was no longer set to inline.

 

Thanks.  

Go to the full post


  • Please log in to reply
6 replies to this topic

#1 cjr

cjr

    Newbie

  • Members
  • 6 posts
  • Framework Version:Professional
  • Country: Country Flag

Posted 11 March 2013 - 04:30 PM

I've placed a menu in the primary sidebar but for some reason it will not list vertically (see screenshot) (

Please Login or Register to see this Hidden Content

). Instead, the first two menu items (i.e., About, Contact) are listed in the same row. This seems strange to me, as the html looks like standard <ul><li>...</li></ul>, which I always understood to create line breaks.

 

Any suggestions? Thanks, 

 

- cjr

 

 

Professional Framework

WordPress Version 3.5.1

 

Attached Files



#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 11 March 2013 - 05:19 PM

I'm not seeing the menu in your sidebar. Did you remove it? The list is probably not vertical because the display isn't set to inline in the CSS.



#3 cjr

cjr

    Newbie

  • Members
  • 6 posts
  • Framework Version:Professional
  • Country: Country Flag

Posted 11 March 2013 - 05:24 PM

Sorry about that -- the sidebar is only set to appear on the "About" pages (e.g., 

Please Login or Register to see this Hidden Content

). 

 

I'm not familiar with the set the display to inline. Could you suggest some code?

 

Thanks again,

 

-cjr



#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 11 March 2013 - 05:54 PM

Yes, the inline code is used in the custom CSS. You’ll need to use Custom CSS (in PageLines > Site Options > Custom Code > Custom CSS/LESS). To find the Custom CSS you need, you'll need to use Firebug (or Chrome Development tools). To learn how to use Firebug for CSS customizations, please review this entire documentation and follow the instructions:

Please Login or Register to see this Hidden Content

. For more insight on the inline code, please see:

Please Login or Register to see this Hidden Content



#5 cjr

cjr

    Newbie

  • Members
  • 6 posts
  • Framework Version:Professional
  • Country: Country Flag

Posted 11 March 2013 - 06:15 PM

I'm familiar with editing the Custom CSS and with using Firebug. What I'm struggling with is editing the CSS to achieve the vertical display. Here's what I've tried but didn't work:

 

 

#sb_primary.copy.no_clone.section-sb_primary {display:inline}
 
Thanks.


#6 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 11 March 2013 - 08:48 PM

Hi,

 

If you go to Dashboard > Appearance > Widgets, you will find an option for "Custom Menu" among the available widgets.  If you place this in any of the vertical sidebars you may have, it automagically sets up the menu in stacked, vertical order, even if it's the same menu used in the Nav.

 

There's no need to restyle it or recreate it to create vertical alignment in a sidebar.  If you want, you can even go to Dashboard > Appearance > Menus and create a new custom menu and assign that to the vertical one, and have your original for horizontal navigation.

 

The custom sidebar menu can be styled differently that way.



#7 cjr

cjr

    Newbie

  • Members
  • 6 posts
  • Framework Version:Professional
  • Country: Country Flag

Posted 11 March 2013 - 11:37 PM   Best Answer

I appreciate the quick response but I was already using a Custom Menu in the sidebar. With a bit of trial-and-error, it turns out that I needed to add the following to change the style:

 

#menu-about_menu {display: inline;}

 

I had modified the CSS previously to change the background and font color with/without mouse hover and, in doing so, it seems the menu display was no longer set to inline.

 

Thanks.