Best way to Center brand in Nav?

1

Just looking for a little advice on what would be the best way to go about centering the brand (logo) in the Nav bar? (Keeping the menu dynamic of course)

Like:

|Menu item 1|Menu item 2|Menu item 3|- LOGO.SVG- |Menu item 4|Menu item 5|Menu item 6|

If that makes sense. Any advice would be great thanks.

2

This is not a Roots question, it’s a Bootstrap/CSS/HTML question.

3

Okay sorry. Well I figured it out anyways. Well I think it may be more than a bootstrap question to be fair, because you could do it easy via just Bootstrap, but it’s more bootstraps integration with the WordPress menu that makes it a little more tricky.

4

Posting your findings would be very much welcomed. It will help the next person who searches here for a solution. Thanks.

2 Likes
5

You could create a custom walker, or how about a little jQuery? Link to JSFiddle

It works by hiding the Home text and positioning the img using a pseudo selector. You could alter it to detach and append the li instead, then insert the image, if you want the image to be linkable.

1 Like
6

Had the exakt same thing on this site that we built: http://hundensdag.royalcanin.se

We used the optional “css-class” field that can be set for each item in WordPress under Appearances->Menus. Then in the lib/nav.php walker class we did a check for menu item name and css class, if they both match we replace the menu item with a logotype. Code example below.

function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
    $item_html = '';
    parent::start_el($item_html, $item, $depth, $args);

    if ($item->is_dropdown && ($depth === 0)) {
      $item_html = str_replace('<a', '<a class="dropdown-toggle" data-toggle="dropdown" data-target="#"', $item_html);
      $item_html = str_replace('</a>', '</a>', $item_html);
    }
    elseif (stristr($item_html, 'li class="divider')) {
      $item_html = preg_replace('/<a[^>]*>.*?<\/a>/iU', '', $item_html);
    }
    elseif (stristr($item_html, 'li class="nav-header')) {
      $item_html = preg_replace('/<a[^>]*>(.*)<\/a>/iU', '$1', $item_html);
    }
    elseif (stristr($item_html, 'Hundens dag') && stristr($item_html, 'imagelogotype')) {
      $item_html = '<li class="logotyp visible-desktop"><a class="brand" href="'.get_bloginfo('url').'"><img src="'.get_bloginfo('template_url').'/assets/img/logotyp@2x.png" /></a></li>';
    }

    $item_html = apply_filters('roots_wp_nav_menu_item', $item_html);
    $output .= $item_html;
  }
1 Like
7

Thanks for the replies everyone. I ended up doing pretty much the same thing as olafjlindstrom suggests. But I did also figure out, while messing around with the problem that it could be done with just CSS, but I think it’s a very hacky solution and I wouldn’t necessarily recommended it. But in case anyone is interested this is basically what I did:

I used “:nth-child()” to divide the menu in the center. Like : .navbar-default .navbar-nav > li:nth-child(4) {
margin-left: 20em;
}

The something like: .navbar-default .navbar-nav {
margin-left: 10em;
}

To balance it and of course centering the brand is as simple as something like:
.navbar-brand {
position: absolute;
width: 100%;
bottom: 100px;
left: 0;
text-align: center;
margin: auto;
}

I would note that both mattrads and olafjlindstroms solutions may well be more stable than the one I’ve posted here.