Word 'menu' on a menu!

[millroly]

I am using the <?php get_navigation(return_page_slug()); ?> on my template. I am trying to create a restuarant site. When adding a page to the menu, using the word 'Menu' it produces a site which moves to the left, with all the other menu links it stays in the middle. Replacing the menu text with any random word, the site stays as it should.

It also does the same if I use the word 'Navigation'?

Does anyone have any ideas how to fix this, please?

(PS, I have two other web sites of slightly differing contruction and it does exactly the same with them).

[Angryboy]

Hello millroly,

I have tested this with both menu and navigation as the words in the menu and can't seem to reproduce this problem.

What theme do you currently have enabled? It is possible that because each menu link receives a CSS class that is the same as their page slug, it is being styled with the same rules as another element on the page (e.g. if the whole navigation structure has been given the class "menu", having a link in that nav structure with the same class might push the rest of the site out of place).

[Timbow]

Hello millroly,

I have tested this with both menu and navigation as the words in the menu and can't seem to reproduce this problem.

What theme do you currently have enabled? It is possible that because each menu link receives a CSS class that is the same as their page slug, it is being styled with the same rules as another element on the page (e.g. if the whole navigation structure has been given the class "menu", having a link in that nav structure with the same class might push the rest of the site out of place).

I certainly once had that problem trying to name a page 'current' - couldn't work out why the link always seemed to be styled as if it was er, 'current'. Then the penny dropped.

[shawn_a]

I am going to guess that we add some unprefixed ids as classes for styling, and naturally these are common classes.

You will have to make a css rule to specifically override those classes with more specificity or modifiy the core.

[shawn_a]

Here is how get_nav works.

The menu <li> gets a class of the menu items slug and its parent slug.
The current <li> gets the classes of the items slug and parent slug and "current" and "active"

So we should probably change this to something like page_%slug% and parent_%slug% to avoid these issues.

But the whole menu thing is going to be rewritten so we will probably do something better then.

[Angryboy]

Is it that significant that it needs modifying in the core, though? Theme developers can avoid this problem by using specific CSS selectors (e.g.):

Code:

<style>
  nav > a.menu {
    // style for menu in navigation
  }
  div.menu, div#menu {
    // style for menu div block (id or class)
  }
</style>

<!--menu class here only affects the menu link-->
  <nav>
    <a href="/menu/" class="menu">Menu</a>
  </nav>

<!--menu class here only affects the div block-->
  <div class="menu" id="menu">Content</div>

[shawn_a]

as they should, yes.
or just

#nav.menu

[Angryboy]

Better far simpler way of putting it, indeed (so #nav.menu for the navigation and div.menu for the content, assuming that #nav is not also a div).

[shawn_a]

unless the theme needs several menus on a page, but thats what submenus are for or sidemenus etc.

I still think its wise to avoid generic class names if they are being dynamically created. I mean it could be anything, alert label, warning, popup and cause issues.

[Angryboy]

Perhaps it is. But if class names need to be that specific, they may as well be IDs. I might be backwards in thinking this, but I always think that class names are allowed to be lenient in how they are named simply because they don't have to refer to exactly one element. I would prefer shorter class names structured by hierarchy like:

Code:

<nav>
  <ul class="pages">
    <li class="item1"><a href="">Item 1</a></li>
    <li class="item2"><a href="">Item 2</a></li>
    <li class="item3"><a href="">Item 3</a></li>
  </ul>
</nav>

than

Code:

<nav>
  <ul>
    <li class="pages_item1"><a href="">Item 1</a></li>
    <li class="pages_item2"><a href="">Item 2</a></li>
    <li class="pages_item3"><a href="">Item 3</a></li>
  </ul>
</nav>

But it's all just taste at this stage.

[shawn_a]

Of course but there are really not real class names, in actuality they are data attributes. I would make then data-attributes, and force people to use javascript selectors and not css classes to style them.

I mean if you want that granular of a style for your menu, perhaps the entire nav function should be custom.

But they are already in there, sooo

[Angryboy]

Forcing javascript selectors for CSS styling? Sounds like a bit round-the-houses solution, and particularly unfriendly for designers who have yet to delve into javascript...unless I've misunderstood something...

But yeah, I am basically saying that how it is now is fine, and that the work-around is basically employing good CSS practices.

[shawn_a]

For styling specific menu items by their content yes.

Of course you could also use attribute selectors on rel and title attributes, and we could ditch the classes entirely.
[title=menu]{}
not sure the browser support on this though

[Angryboy]

Hmm...I see where you are going with the idea -- and I don't think it is bad -- but the convention isn't common enough to confidently implement. It is more likely to alienate designers and steer template creation away from the 'simple' mantra that GS wears.

[shawn_a]

This has nothing to do with templates. This is some dude wanting his "insert page name" here to be a different color than the rest, or some other wierd crap. There is no other use for using slug class selectors that i know of.
Perhaps hiding them or something else, but neither is something a template would be concerned with , again this is a dynamically based on users content.

[Angryboy]

Hahaha, fair enough xD If it's esoteric enough to warrant that kind of treatment, then it's beyond my typical use. You know what you're doing, so I'll trust your judgement.

[shawn_a]

Yeah so unless someone has a specific reason, I did not think of. This is how i figure most people would use be using this.

[Angryboy]

That genuinely made me laugh, shawn xD

[Connie]

similar problem with a page called "Links" (where you publish links, for example..)
I found I had to rename that page and define the "text in menue" as "links" (but I could not explain that to my clients)

[millroly]

Thanks for your help with this. I am a 'newbie' template developer. I do 'sort of' understand most of what is written by other contributors. I have created a series of about 20 (hopefully contemporary) original templates all on a basic structure so that any clients find their experience of maintaining their web site easy. I am just getting to grips with the CSS, so this sort of early answering to my queries is very helpful. Roly

[shawn_a]

https://github.com/GetSimpleCMS/GetSimpleCMS/issues/605