Recommended techniques for changing the appearance/design of my Bootstrap sub-theme?

Question

I use Bootstrap (7.x-3.0 for Drupal 7 which I already created my own sub-theme and I enabled this sub-theme as my default theme. It seems to work so far.

Now, I want to change the appearance/design of my menu. Here is the appearance with the Bartik-theme:

And here is the equivalent using the Bootstrap-theme:

If I want to customize the Bootstrap theme to look similar to the Bartik theme, how do I do this? In the base-theme folder of Bootstrap I found menu-tree.func where the menu tags are generated, which looks like so:

/**
 * @file
 * menu-tree.func.php
 */

/**
 * Overrides theme_menu_tree().
 */
function bootstrap_menu_tree(&$variables) {
  return '<ul class="menu nav">' . $variables['tree'] . '</ul>';
}

/**
 * Bootstrap theme wrapper function for the primary menu links.
 */
function bootstrap_menu_tree__primary(&$variables) {
  return '<ul class="menu nav navbar-nav">' . $variables['tree'] . '</ul>';
}

/**
 * Bootstrap theme wrapper function for the secondary menu links.
 */
function bootstrap_menu_tree__secondary(&$variables) {
  return '<ul class="menu nav navbar-nav secondary">' . $variables['tree'] . '</ul>';
}

Do I have to edit this file? I don't really think so. Further, each element of the menu uses the class called leaf which I couldn't find at all in any files of Bootstrap.

Hope my point is clear. I just want to edit the appearance of my menu and also of further elements without creating an entire custom-node.tpl.php. Is that possible or do I have to create an entire new file?

Answer 1

Since you're using Bootstrap as a style framework already, I'd recommend you simply restyle the navbar to look like Bartik. You'll have to modify your page.tpl.php template to move the various elements of the header around to put the site title and user menu on top of the main menu.