Jump to content


Photo
- - - - -

Main Nav styling

nav

Best Answer James B , 27 March 2013 - 11:25 PM

Hi there, those indicate that the top item is an anchor for the dropdown, not a link. Unfortunately the navbar doesn't allow for top items to be dropdown anchors as well as links to other pages, this was how it was designed by the team at twitter bootstrap, I'd imagine due to the rise in touch screen devices. People on phones and tablets wouldn't be able to activate the dropdown without accidentally going to the link etc.

 

However, there are some premium navbars in the store which allow the top item to be a link and are styled better than the classic nav.

Go to the full post


  • Please log in to reply
6 replies to this topic

#1 janetravis

janetravis

    Member

  • Members
  • 22 posts
  • Country: Country Flag

Posted 27 March 2013 - 08:08 AM

Hi

 

I like to copy over styles from nav bar to nav classic. Looking at styles applied to nav bar and am confused.

 

Please Login or Register to see this Hidden Content

 

i have added this:

 

ul.main-nav {


    background-color: #5E8DC8;
    background-image: -moz-linear-gradient(center top , #6E9ED2, #4574B8);
    background-repeat: repeat-x;
    border-top: 1px solid #4574B8;

}

 

but this is the only style i could find.

 

Appreciate if you could send me the styles need to be applied to nav classic, to duplicate the same blue nav bar look.

 

thx



#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 17967 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 27 March 2013 - 08:47 AM

Hi,

 

 

Unfortunately, we are unable to provide you the custom CSS needed to achieve your layout. However, all the styles can be found in:

 

wp-content/themes/pagelines/sections/navbar/style.less

 

Please bear in mind that all styling in this file is both CSS and LESS CSS.

 

The code you have provided above is only compatible with FF, you need to make sure you add gradient support for all others browsers. What you will need to do is convert the styling for the NavBar classes to the Nav Classics classes. It won't be an easy job but it should be possible. 

 

If you're having difficulty, you could contact one of our Pros, who will be more than happy to assist you -

Please Login or Register to see this Hidden Content



#3 janetravis

janetravis

    Member

  • Members
  • 22 posts
  • Country: Country Flag

Posted 27 March 2013 - 07:44 PM

Thank you, will contact the PRO guys.

 

Question:

My only problem with NAV bar is the  #m1. #m, etc links on top of sub-menu items. Is there a way to to replace them with links to pages and posts?

 

I did not understand what are they for anyways.

 

Please Login or Register to see this Hidden Content



#4 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 27 March 2013 - 11:25 PM   Best Answer

Hi there, those indicate that the top item is an anchor for the dropdown, not a link. Unfortunately the navbar doesn't allow for top items to be dropdown anchors as well as links to other pages, this was how it was designed by the team at twitter bootstrap, I'd imagine due to the rise in touch screen devices. People on phones and tablets wouldn't be able to activate the dropdown without accidentally going to the link etc.

 

However, there are some premium navbars in the store which allow the top item to be a link and are styled better than the classic nav.



#5 janetravis

janetravis

    Member

  • Members
  • 22 posts
  • Country: Country Flag

Posted 28 March 2013 - 06:44 AM

Where are the premium navbars in the store? i could not find them.

 

thx



#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 17967 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 28 March 2013 - 06:55 AM

I think the one James was referring to is this:

 

Please Login or Register to see this Hidden Content



#7 janetravis

janetravis

    Member

  • Members
  • 22 posts
  • Country: Country Flag

Posted 28 March 2013 - 04:38 PM

bought it. thx.

 

One more question:

How can i keep teh post thumbnails always to the left of the post? It jumps to teh top on mobile devices. I liek to see a smaller version o fteh thumbnail, or teh same size, always on teh left:

 

Please Login or Register to see this Hidden Content

 

Thank you







Also tagged with one or more of these keywords: nav