• 0
Sign in to follow this  
Followers 0

Hero Nav Individual Hero Nav Style (by groups of pages)

Question

Posted · Report post

Is there a possibility to create custom CSS ...

  • that adds different style options
  • to different menues on a site (on fdiffernt sites)
  • ... which bypasses the General setting scheme

 

Reason for that is, that I want to have some sort of different color coding on different pages (eg. Text color).

Using this class to than enter the new class into the respektive sections "Custom Styling Classes".

 

br

,Michael

Share this post


Link to post
Share on other sites

4 answers to this question

  • 0

Posted · Report post

micstepl,

 

Sorry to hear you're having trouble styling Hero Nav the way you want Michael.  I can offer some suggestions but custom coding like this is really outside the scope of this forum.

 

 

You can achieve different styles on different pages by nesting your styles in the class for the specific page you want to style.

 

You could try something like this, using the following LESS as an example:

// assuming page id is 50
body.page-id-50 {
	.section-hero-nav .hero-nav .hero-nav-ul.separated > li {
	border-right: 1px solid #afafaf;
	}
	 
	.section-hero-nav .hero-nav .hero-nav-ul > li > a {
	color: #0099ff;
	}
	 
	.section-hero-nav .hero-nav {
	background-color: #afafaf;
	shadow: silver 0 -6px 6px;
	border-bottom: 1px solid #afafaf;
	}
	 
	.hero-nav-collapse-btn {
	padding: 4px 8px;
	font-size: 1.0em;
	}
}

// assuming page id is 52
body.page-id-50 {
	.section-hero-nav .hero-nav {
		background-color: @gray;
	}
}

Simply inspect the body tag on the page you want to customize to see the relevant page-id-X class to use.

 

Like I mentioned before, this is what my PageLESS extension is designed for - custom styles for individual pages/posts.  No need to fuss with these classes.  You can define your own custom styles for any page/post using LESS/CSS.

 

Good luck!

 

 

Thanks SOOOOOO much :) I really appreciate your tip - it worked!#

 

I can only recommend you as a developer for your pragmatic, competent support!

 

br

,Michael

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

micstepl,

 

Yes it is possible, but there is no built-in feature in Hero Nav to accomplish that if that's what you're asking?  The Hero Nav styles are global and apply to all instances of the section and you can't simply change one of the styling options for it on one page.

You would need to create those styles yourself and apply them on the pages you want to change.

To do that, you could use the unique page-id class that is added to the body, or you could use a more sophisticated tool like my Page{LESS} extension.

 

Hope that helps!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

micstepl,

 

Yes it is possible, but there is no built-in feature in Hero Nav to accomplish that if that's what you're asking?  The Hero Nav styles are global and apply to all instances of the section and you can't simply change one of the styling options for it on one page.

You would need to create those styles yourself and apply them on the pages you want to change.

To do that, you could use the unique page-id class that is added to the body, or you could use a more sophisticated tool like my Page{LESS} extension.

 

Hope that helps!

 

not really :(

 

WORKING

I tried to  to change style with code below, which works when inserting in the custom code field. It overrides than the global settings, but un all NAVĀ“s.

 

NOT WORKING

If I wrap code bist in custom classes and insert the classes than in the Section it doees not work.

 

pls help

tax in advance

,Michael

 

 

 

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
 
.section-hero-nav .hero-nav .hero-nav-ul.separated > li {
border-right: 1px solid #afafaf;
}
 
.section-hero-nav .hero-nav .hero-nav-ul > li > a {
color: #0099ff;
}
 
.section-hero-nav .hero-nav {
background-color: #afafaf;
shadow: silver 0 -6px 6px;
border-bottom: 1px solid #afafaf;
}
 
.hero-nav-collapse-btn {
padding: 4px 8px;
font-size: 1.0em;
}
 
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
 
eg. 
 
 
.MyOwnClass {.section-hero-nav .hero-nav .hero-nav-ul > li > a {
color: #0099ff;
}
}
 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

micstepl,

 

Sorry to hear you're having trouble styling Hero Nav the way you want Michael.  I can offer some suggestions but custom coding like this is really outside the scope of this forum.

 

 

You can achieve different styles on different pages by nesting your styles in the class for the specific page you want to style.

 

You could try something like this, using the following LESS as an example:

// assuming page id is 50
body.page-id-50 {
	.section-hero-nav .hero-nav .hero-nav-ul.separated > li {
	border-right: 1px solid #afafaf;
	}
	 
	.section-hero-nav .hero-nav .hero-nav-ul > li > a {
	color: #0099ff;
	}
	 
	.section-hero-nav .hero-nav {
	background-color: #afafaf;
	shadow: silver 0 -6px 6px;
	border-bottom: 1px solid #afafaf;
	}
	 
	.hero-nav-collapse-btn {
	padding: 4px 8px;
	font-size: 1.0em;
	}
}

// assuming page id is 52
body.page-id-50 {
	.section-hero-nav .hero-nav {
		background-color: @gray;
	}
}

Simply inspect the body tag on the page you want to customize to see the relevant page-id-X class to use.

 

Like I mentioned before, this is what my PageLESS extension is designed for - custom styles for individual pages/posts.  No need to fuss with these classes.  You can define your own custom styles for any page/post using LESS/CSS.

 

Good luck!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0