Problems styling the header

stlcardsfan
(@stlcardsfan)

6 years, 5 months 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=”http://gmpg.org/xfn/11″>
<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)

6 years, 5 months ago
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)

6 years, 5 months ago

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)

6 years, 5 months ago

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)

6 years, 5 months ago

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)

6 years, 5 months ago

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)

6 years, 5 months ago

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.