Controlling the Navigation with CSS

[fordp86]

I have been looking everywhere for this answer and can't seem to find it so I am giving up and asking for help.

I have the nav component inside of a div id with a class for the nav ul but I am not sure how to style the li for the un-ordered list. Can anyone help? Here is my codE.

Code:

<div id="navbar">
<ul class="nav">
    <?php get_navigation(return_page_slug()); ?>
</ul>
</div>

Code:

#navbar a ul {
    list-style-type: none;
    display: inline;
    height: 69px;
    width: 624px;
    left:311px;
    font-family: 'ChunkFive', Arial, sans-serif;
    color: #11B4E0;
    
}


.nav ul  a{
    list-style-type: none;
    display: inline;
    font-family: 'ChunkFive', Arial, sans-serif;
    color: #11B4E0;
    font-size:24px;
}


.current li {
list-style-type: none;
    display: inline;
     font-family: 'ChunkFive', Arial, sans-serif;
  color: #11B4E0;
  font-size:24px;

  

}
.current a{
  list-style-type: none;
  display: inline;
  color: #11B4E0;
  font-family: 'ChunkFive', Arial, sans-serif;
  font-size:24px;

}

I tried styling for class current but that only does the current page link. I think something is overriding it but I am not sure.

[xrmarcis]

This stuff gets tricky when you are working in classes and ID's

Here is a sample of how i did some styling for my nav menu. Always started off with the ID and then work the tags to format. When you get the basic stuff down then you add extras like .current to the li tag

Code:

#nav ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

            #nav ul li {
            --    display: block;
                padding: 0 12px 0 12px;
                float: left;
            }
        
                #nav ul li a {
                    display: block;
                    text-decoration: none;
                    color: #ffffff;
                --    border-top: 1px solid #ffffff;
                --    padding: 5px 15px 5px 15px;
                --    background: #2C5463;
                --    margin-left: 1px;
                    white-space: nowrap;
                }

                #nav ul li a:hover {
                    background: #007289;
                    box-shadow: inset 0px -10px 40px 0px #005B6D;
                }

This is what my div looks like in my template.

Code:

<div id="nav">
        <ul>
            <?php get_i18n_navigation(return_page_slug(), 0, 1, I18N_SHOW_Menu); ?>
        </ul>
    </div>

Hope this helps you get started.

[mvlcek]

I have been looking everywhere for this answer and can't seem to find it so I am giving up and asking for help.

...

I tried styling for class current but that only does the current page link. I think something is overriding it but I am not sure.

current is a class on the li, so your rule probably should be li.current instead of .current li.

[fordp86]

Thanks guys I got it to work. One other question though. Is their to display text in the nav to make it look like their is a <br> or break so the name of the page looks like this?

How it
Works

Instead of How it Works

[xrmarcis]

You would need some rules for this to work.

Every 2 words go to the next line type of deal.

Did you want it to break to the next line for every menu item?

[shawn_a]

You could set the width or padding-right to make it wrap.
But you will have to fiddle with the display type to get it to wrap.
Since you can't insert a span or modify the output your limited to css

Sounds like you need to read up on css and check out some examples as what you are doing is getting more and more complicated.

If you have working code to show us someone might be able to post the css.

[fordp86]

Thanks guys I will try that out. I would post the link for what I am doing but since it is not done I don't want our competitors to come across it in an alert. I took some screen shots though. See attached for the way it is currently displayed in Get Simple as text.

Here is how it should look.


This one is an image map not text. I am trying to use it as text instead.

[xrmarcis]

humm not sure it can be done effectively in css as i don't know if it would break always in the right spot. You would have to have a class for each menu item and change the width so i looked right still just as much work as creating a menu manually and doing the breaks how you want them. Sounds like you need a function to take the menu items and based on certain number for characters put a <br /> in the text.

Will you have a drop down for each?

Would you be apposed to a static menu that was in a component?

You could make the list manually and have all the links done and <br /> where you need it to. Then style it how you want if you want to use a component.

Meh sorry not much help but trying to brainstorm on how you could do it with out wasting a life time figuring out php functions and i18n code.

[fordp86]

No by boss doesn't like dropdowns and they only want those four pages I was trying not to use an image map for accessibility and to speed up the page from using a lot of images.


I tried using css word-wrap and other things like it but it didn't do much.

[shawn_a]

Well I'm saying if you had a demo up it would take 5 minutes of fiddling and we could give you the code.
Or set up your code on jsfiddle

[shawn_a]

You could also use a custom component with i18n to split where you want , if that was some kind of design decision

[xrmarcis]

Yep i would stick with a static menu in a component.

Check out the attachment that is a pretty simple sample. Take the code snippet on the right and paste that into your template.

The CSS styling should take it from there. This will allow you to break the menu items where you want. It will not be dynamic but you will have a good way in the GS admin panel to modify the menu without having to open the template in an editor to modify the theme files.

Give it a try.

[fordp86]

Awesome! I think the static menu in a component will work since it's not a giant navigation. I was clearly over thinking the whole thing.

[xrmarcis]

Awesome! I think the static menu in a component will work since it's not a giant navigation. I was clearly over thinking the whole thing.

Glad i could help keep it simple. That's what GS is all about.