Reduce navigation bar Streamline Pro keeping text & pointer positions

Community Forums Forums Design Tips and Tricks Reduce navigation bar Streamline Pro keeping text & pointer positions

This topic is: resolved

This topic contains 10 replies, has 2 voices, and was last updated by  wizz6113 7 months ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #87235

    wizz6113
    Member
    Post count: 76

    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;
    }

    #87359

    asterbird
    Participant
    Post count: 101

    Can you provide a link to the site please?

    #87413

    wizz6113
    Member
    Post count: 76

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

    #87432

    wizz6113
    Member
    Post count: 76

    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!

    #87456

    asterbird
    Participant
    Post count: 101

    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;
    ...
    #87461

    wizz6113
    Member
    Post count: 76

    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.

    #87720

    asterbird
    Participant
    Post count: 101

    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;
    }
    #87727

    wizz6113
    Member
    Post count: 76

    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.

    #87741

    asterbird
    Participant
    Post count: 101

    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 :)

    #87742

    asterbird
    Participant
    Post count: 101

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

    #87793

    wizz6113
    Member
    Post count: 76

    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.

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.