First, let’s not discuss design- she insisted I stick with this - I am hired only for SEO on this project. I am a bit embarrassed about this layout so let’s focus on the menu for now!
I want to be able for this menu to grow (in case they have their font view on +1), without sending one link to a new row, thereby messing up my design. If I make this box bigger, I cannot make the menu float in the center of the box (the type itself is aligned to the center in the html box, but the action forces the nav bar to the far left of the html box. Due to the fact this is a horizontal navigation, if the html box grew from the center as text size was increased, then I could account for this growth a bit more and keep things looking clean.
Overall, there doesn’t seem to be a way for me to allow for an increase from 12 to 14pt using this action and aligning the page from the center.
Is there a way the action could help prevent this from happening? I am obviously not too versed in the art of CSS, so I was hoping this would be a one-stop-shop for cool navigation.
I think I figured how to use this action to my advantage. Using short link names on the 1st row (about, read, contact), and longer link names for the 2nd level of navigation (about the author, amy gorman), I am allowed to actually use longer link names than if I used html b/c it does not require the real estate all the time. this is good news for that very important place where my seo and design work meet.
here is the solution, albeit still a bit out of whack, i’m on my way there.
i’m also noticing that selecting items behind the html box containing the css nav action is somewhat difficult. my h1 tags that lie below the menu are hard to select, and even stranger, when i am IN the H1 tag, that is - after i’ve double clicked it and am typing in the box - if i try to click my cursor to a point in text i want to edit, and that point taking up the same space as the css menu - freeway automatically selects the css menu… the solution is to use the arrow keys and plan ahead with your design so you’re not hindered by this, until they resolve the bugs from the beta.
I think the simplest way to do this would be to make the CSS menu an inline item of another div that is set to 100% width, or whatever size you need. Pad the parent div on the left with enough space to shove the CSS menu over till it’s centered. You will have to experiment with sizing.
By the way, to get a background color that fills the whole div, select the div and set both the background color and the div color the same. Setting the background color in the Styles menu only styles the text area of the list. For an interesting effect, try setting the hover color of the background something different from background color.