Problems styling the header

  • stlcardsfan

    (@stlcardsfan)


    7 years ago

    I’ve scoured the net for support, but it’s few and far in between. All I’m looking to do is simply add a phone number to the right side of the header. What gives?

    `
    <?php
    /**
    * The header for our theme.
    *
    * Displays all of the <head> section and everything up till <div id=”content”>
    *
    * @package understrap
    */

    $container = get_theme_mod( ‘understrap_container_type’ );
    ?>
    <!DOCTYPE html>
    <html <?php language_attributes(); ?>>
    <head>
    <meta charset=”<?php bloginfo( ‘charset’ ); ?>”>
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
    <meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”>
    <meta name=”mobile-web-app-capable” content=”yes”>
    <meta name=”apple-mobile-web-app-capable” content=”yes”>
    <meta name=”apple-mobile-web-app-title” content=”<?php bloginfo( ‘name’ ); ?> – <?php bloginfo( ‘description’ ); ?>”>
    <link rel=”profile” href=”https://gmpg.org/xfn/11″&gt;
    <link rel=”pingback” href=”<?php bloginfo( ‘pingback_url’ ); ?>”>
    <?php wp_head(); ?>
    </head>

    <body <?php body_class(); ?>>

    <div class=”hfeed site” id=”page”>

    <!– ******* Header ******* –>
    <div class=”wrapper-fluid”>
    <header>

    <!– Your site title as branding in the menu –>
    <div class=”container”>
    <div class=”row”>
    <div class=”col-md-6″>
    <?php if ( ! has_custom_logo() ) { ?>

    <?php if ( is_front_page() && is_home() ) : ?>

    <h1 class=”navbar-brand mb-0″>” title=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>”><?php bloginfo( ‘name’ ); ?></h1>

    <?php else : ?>

    ” title=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>”><?php bloginfo( ‘name’ ); ?>

    <?php endif; ?>

    <?php } else {
    the_custom_logo();
    } ?>
    </div>
    </div>

    <!– end custom logo –>
    <div class=”row”>
    <div class=”col-md-6″>
    <p class=”text-right”>Call Now<br>
    636-244-9045</p>
    </div>
    </div>
    </div>
    <!– ******************* The Navbar Area ******************* –>
    <div class=”wrapper-fluid wrapper-navbar” id=”wrapper-navbar”>

    <?php esc_html_e( ‘Skip to content’,
    ‘understrap’ ); ?>

    <nav class=”navbar navbar-expand-md navbar-dark bg-dark”>

    <?php if ( ‘container’ == $container ) : ?>
    <div class=”container”>
    <?php endif; ?>

    <button class=”navbar-toggler” type=”button” data-toggle=”collapse” data-target=”#navbarNavDropdown” aria-controls=”navbarNavDropdown” aria-expanded=”false” aria-label=”Toggle navigation”>
    <span class=”navbar-toggler-icon”></span>
    </button>

    <!– The WordPress Menu goes here –>
    <?php wp_nav_menu(
    array(
    ‘theme_location’ => ‘primary’,
    ‘container_class’ => ‘collapse navbar-collapse’,
    ‘container_id’ => ‘navbarNavDropdown’,
    ‘menu_class’ => ‘navbar-nav’,
    ‘fallback_cb’ => ”,
    ‘menu_id’ => ‘main-menu’,
    ‘walker’ => new WP_Bootstrap_Navwalker(),
    )
    ); ?>
    <?php if ( ‘container’ == $container ) : ?>
    </div><!– .container –>
    <?php endif; ?>

    </nav><!– .site-navigation –>

    </div><!– .wrapper-navbar end –>
    </header>
    </div>

Viewing 6 replies - 1 through 6 (of 6 total)
  • understrap

    (@holger1411)

    Hi!

    Add this:

        <span class="navbar-text">
      Call now 636-244-9045
    </span>

    right before this code:

    <?php if ( ‘container’ == $container ) : ?>
</div><!– .container –>
<?php endif; ?>
    Thread Starter stlcardsfan

    (@stlcardsfan)

    Thanks, although I only want the number to appear in the navbar on mobile.

    What about the logo? I’m trying to style that for mobile and I can’t find the name anywhere. navbar-brand?

    understrap

    (@holger1411)

    If you want to display elements on extra small screens only add this both classes to the html element:
    d-block d-sm-none

    That means “display the element as block but dont display it on small (and bigger) screens.

    Bootstrap works with T-Shirt sizes: xs, sm, md, lg, xl

    It works for any element, including the logo.
    And yes: “navbar-brand” is the brand space in your navbar

    Thread Starter stlcardsfan

    (@stlcardsfan)

    Thanks. I really like the theme. Just trying to get used to styling and what not so I can code on this one as opposed to buying others.

    Thread Starter stlcardsfan

    (@stlcardsfan)

    So I installed npm and Gulp to develop the theme, and now it’s huge. I know I’m a newbie, but what steps do I take to shrink this thing down before uploading it?

    understrap

    (@holger1411)

    You don′t need to upload this. Its just for your local development.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Problems styling the header’ is closed to new replies.