Reduce navigation bar Streamline Pro keeping text & pointer positions

[wizz6113]

I am trying to narrow the primary navigation bar but retain cursor and menu label text in their positions (cursor / pointer to stay top of bar; and text centred in narrowed navbar). On narrowing the navbar, I end up with text and cursor squidged right up top together. What code do I tweak? Is it somewhere here - see below? I added padding but found the cursor moved into the navbar area, still 'adjoined' to the text!). Thanks anyone!

#responsive-menu-icon {
cursor: pointer;
display: none;
padding: 17px 0 18px;
padding: 1.7rem 0 1.8rem;
text-align: center;
}

#responsive-menu-icon::before {
content: "\e600";
color: #999;
margin: 0 auto;
speak: none;
text-shadow: -1px -1px #222;
text-transform: none;
}

[asterbird]

Can you provide a link to the site please?

[wizz6113]

Hi thanks - but my site in in localdev only. Would you still be able to guide me on this though?

[wizz6113]

I've put a link to a screengrab of the dev page here: http://www.strategyworks.net/streamline-dev-issues/

I think you can just make out the problem on the home button - which shows up best.

Thanks so much!

[asterbird]

Oh, navigation is so tricky for me.... try changing line-height near line 1038:

.genesis-nav-menu {
    color: #999;
    line-height: 0;
}

Dunno if you'll have to change submenu positioning then... in line 1074, add margin:

.genesis-nav-menu .sub-menu {
    margin-top: 16px;
...

[wizz6113]

Thanks Asterbird, but that didn't work. I ended up with the menu text floating nearer the navbar centre width, but the cursor below it! Weird. The second piece of code gave a large gap between the drop down sub nav labels. It must be something to do with 'floating' the navbar text, but also somehow uncoupling its location from that cursor which must stay put up top!

Anyone ideas? Thanks so much though for the help.

[asterbird]

I just started working with Streamline for a new project. Trying to do the same thing. Maybe try this:

around line 1178

.nav-primary .genesis-nav-menu a::before {
content: "";
display: block;
font-size: 30px;
font-size: 3rem;
height: 24px;
margin-top: -1px;
margin-top: .1rem;
text-align: center;
text-shadow: none;
}

I did use this too around line 1050

.genesis-nav-menu a {
    line-height: 0;
}

[wizz6113]

Thanks so much for that - really resolved the issue - cursor now where it should be and menu items pretty near centre width.

I get confused with the navbar refs in the CSS as I come across both .genesis references as well as then later on 'primary' and 'secondary' navigation - I really wasn't sure which to edit. I notice that you added that second bit of code in the .genesis code If you've time and can help me, I'd like to know the difference between these nav ref places?!

Also, I am trying to find how to reduce the width of the secondary navbar, without incurring the same / further problems. I am guessing I edit somewhere around line: 1206 rather than 1091? But again, I am not sure which to opt for. Thanks for your kind help.

[asterbird]

Can you view your local dev site on Chrome or Firefox? Use Chrome's Developer Tools or a free plugin for Firefox called Firebug. Then you can see how the css and html fit together.

I think the class nav-primary is a div that holds the menu. Then inside that the menu ul has a class genesis-nav-menu. The div with an id of responsive-menu-icon is actually a mobile menu ul that is hidden on desktops. This is off the top of my head, so I'm not positive, that something like that.

Glad you got it fixed! you can mark this topic resolved at the top if you have what you need 🙂

[asterbird]

oh, just saw this on another thread about using firebug to troubleshoot css http://www.studiopress.com/tips/using-firebug.htm

[wizz6113]

Thanks so much for these pointers. Your CSS notes make sense. I do have Firebug so will try to use it more. I am learning as a I do, so to speak, so it's a bit of taking time out to study CSS properly and having to get an immediate web project up online. For now, it's just our own site, so it's a good practice place. I'll definitely dive into that link you sent. Thanks again for your kind help.

[Author]

Posts