Site-bar color change

  • Hi,
    I moved the social icons in the site logo section of the header and now I would like to change the site-bar color from white to black in order to create a menu in the upper side of the blog with a graphic coherent with the graphic of the widget title (font white and background black).
    I tryed to do do this adding the line “background: #000000;” to the .nav class in the style.css file of my child theme, but it doesn’t work because I obtain just a short black line stripe that doesn’t spam to the whole site width.

    Thank you in advantace for any suggestion.
    Cheers.

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hi there,
    if you want the menu to cover the full width of the screen you will need to open header.php and replace it with 

    <!doctype html>
<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="profile" href="https://gmpg.org/xfn/11">
	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">

	<?php wp_head(); ?>
</head>
<body <?php body_class(); ?> itemscope="itemscope" itemtype="https://schema.org/WebPage">

<div id="page">

				<header id="masthead" class="site-header group" role="banner" itemscope="itemscope" itemtype="https://schema.org/Organization">

					<div class="site-logo">
						<h1 itemprop="name">
							<a itemprop="url" href="<?php echo esc_url( home_url() ); ?>">
								<?php if ( get_theme_mod( 'logo', get_template_directory_uri() . '/images/logo.png' ) ): ?>
									<img itemprop="logo"
									     src="<?php echo esc_url( get_theme_mod( 'logo', get_template_directory_uri() . '/images/logo.png' ) ); ?>"
									     alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>"/>
								<?php else: ?>
									<?php bloginfo( 'name' ); ?>
								<?php endif; ?>
							</a>
						</h1>

						<?php if ( get_bloginfo( 'description' ) ): ?>
							<p class="tagline"><?php bloginfo( 'description' ); ?></p>
						<?php endif; ?>
					</div><!-- /site-logo -->

					<div class="site-bar group">
	<div class="container">
		<div class="row">
			<div class="col-md-12">
						<nav class="nav" role="navigation" itemscope="itemscope" itemtype="https://schema.org/SiteNavigationElement">
							<?php wp_nav_menu( array(
								'theme_location' => 'main_menu',
								'container'      => '',
								'menu_id'        => '',
								'menu_class'     => 'navigation'
							) ); ?>

							<a class="mobile-nav-trigger" href="#mobilemenu"><i class="fa fa-navicon"></i> <?php esc_html_e( 'Menu', 'olsen-light' ); ?></a>
						</nav>
						<div id="mobilemenu"></div>

						<div class="site-tools">
							<?php if ( get_theme_mod( 'header_socials', 1 ) == 1 ) {
								get_template_part( 'part', 'social-icons' );
							} ?>
						</div><!-- /site-tools -->
					</div>
					</div>
					</div>

					</div><!-- /site-bar -->

				</header>

	<div class="container">
		<div class="row">
			<div class="col-md-12">

				<div id="site-content">

    Remember that you will lose any changes you have made to header.php (you will need to redo them).

    Then add `.site-bar{
    background:#000;
    }`
    in your custom CSS box under Appearance | Customize |?Additional CSS

    • This reply was modified 7 years, 5 months ago by Fotis.
    Thread Starter bantart

    (@bantart)

    Thank you, it works.
    I added the menu including my categories, but I cannot change the link color to white (for the site-bar only), I don’t know why.
    It not so importatn, anyway.
    Cheers.

    Hi there,
    you can try this

    header .navigation > li  a{
 color:red;   
}

    and change the color to your preference.

    Thread Starter bantart

    (@bantart)

    Yeah! It works perfectly.
    Thank you so much!
    Regards.

    Glad I could help!

    • This reply was modified 7 years, 5 months ago by Fotis.
Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Site-bar color change’ is closed to new replies.