Finish UI work for the top-bar

[tbbooher]

This is really several issues in one. Overall goal is to leverage bootstrap semantics/code and do this with minimal custom css.

We need to get the semantics right

I currently have the following markup for this section:

    <div class="top-bar">
       <div class="slidedown">
          <div class="container">
             <div class="phone-email pull-left">
                <a><i class="fa fa-phone"></i> Call Us : 703.123.1234</a>
                <a href="info@crossfitadaptation.com"><i class="fa fa-envelope"></i> Email : info@crossfitadaptation.com</a>
             </div>
             <div class="follow-us pull-right">
                 <?php wp_nav_menu(array('theme_location' => 'member_menu', 'container' => false, 'menu_class' => 'nav navbar-nav', 'walker' => new BootstrapBasicMyWalkerNavMenu())); ?>
             </div>
          </div>
       </div>
    </div>

.top-bar should be of type header and the css should match -- other elements might not be div's

This needs to be responsive

This means incorporating the native media queries such as collapse in bootstrap. I'm not sure if using the collapse plugin is the best way to go or adding media queries, but I would like to be most compatible with bootstrap (see this )

In collapsed mode, everything would stack appropriately

The bar is too high

I would like to set the height to 30 pix with padding

get hover and active effects correct

Right now, I just picked the most simple mouseover I could think of. However, there are much better ways to do this and the active (current) effect is not working.

center everything vertically

hopefully using minimum/native css

[derick-montague]

It's your call on the plugin or not. I can't guarantee to be within agreed scope of time and effort having to work all this in. It is much easier to start from a mobile first design process, but that was abandoned due to time, so we are shoehorning now. I don't care for js plugins for things like this, but it will make development quicker.

[tbbooher]

got it -- I'll work this task

[derick-montague]

I updated this section, please check the WP style sheet. It looks good now. It's still not responsive though. If you want to reduce the height even more, you just need to adjust the padding on the container for that. No need to set static heights. You back-end devs are funny. :)

[derick-montague]

I found the issue with the gap in the header on small screen. I'll fix it for you. super simple. You will still need to format the contents, I just fixed the issue with the gap.

[tbbooher]

are there more styles i need to move in?

tim

On Sat, Nov 29, 2014 at 10:27 PM, Derick Montague notifications@github.com wrote:

I updated this section, please check the WP style sheet. It looks good now. It's still not responsive though. If you want to reduce the height even more, you just need to adjust the padding on the container for that. No need to set static heights. You back-end devs are funny [image: getting started] https://cloud.githubusercontent.com/assets/1183515/5236694/7cf1adcc-780e-11e4-965d-d447854d2d7c.jpg . :)

— Reply to this email directly or view it on GitHub https://github.com/tbbooher/new_cfa/issues/27#issuecomment-64974229.

-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= Tim Booher www.theboohers.org | tim@theboohers.org 703.649.4264 (home) (703) 822-7863 (mobile)