Community Forums › Forums › Archived Forums › Design Tips and Tricks › Reduce navigation bar Streamline Pro keeping text & pointer positions
Tagged: cursor, navbar, navigation, pointer, positions, streamline pro, Width
- This topic has 10 replies, 2 voices, and was last updated 9 years, 10 months ago by
wizz6113.
-
AuthorPosts
-
January 27, 2014 at 9:29 am #87235
wizz6113
MemberI 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;
}January 27, 2014 at 7:38 pm #87359asterbird
MemberCan you provide a link to the site please?
January 28, 2014 at 12:04 am #87413wizz6113
MemberHi thanks - but my site in in localdev only. Would you still be able to guide me on this though?
January 28, 2014 at 2:20 am #87432wizz6113
MemberI'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!
January 28, 2014 at 5:06 am #87456asterbird
MemberOh, 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; ...
January 28, 2014 at 5:24 am #87461wizz6113
MemberThanks 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.
January 29, 2014 at 1:49 pm #87720asterbird
MemberI 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; }
January 29, 2014 at 2:37 pm #87727wizz6113
MemberThanks 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.
January 29, 2014 at 5:03 pm #87741asterbird
MemberCan 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 classgenesis-nav-menu
. The div with an id ofresponsive-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 🙂
January 29, 2014 at 5:05 pm #87742asterbird
Memberoh, just saw this on another thread about using firebug to troubleshoot css http://www.studiopress.com/tips/using-firebug.htm
January 30, 2014 at 5:53 am #87793wizz6113
MemberThanks 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.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.