Editing the navigation bar in the Wordpress- Need help :(

BartJr

Free Member
Feb 12, 2015
248
10
Hi all,

I've been researching for over good few hours now and none of the methods seems to work for me. I need to edit the navigation bar font, font size and also alignment (I would like it to be in the middle).

Could someone please help me with it?

Thank you,
Bart

Below is the code file

<?php
/**
* The header for our theme.
*
* Displays all of the <head> section and everything up till <div id="content">
*
* @package Tesseract
*/
?><!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="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">

<?php wp_head(); ?>

</head>

<?php // Additional body classes
$bodyClass = ( version_compare($wp_version, '4.0.0', '>') && is_customize_preview() ) ? 'backend' : 'frontend';
if ( (is_page()) && (has_post_thumbnail()) ) $bodyClass .= ' tesseract-featured';

$opValue = get_theme_mod('tesseract_tho_header_colors_bck_color_opacity');
$header_bckOpacity = is_numeric($opValue) ? TRUE : FALSE;
if ( is_front_page() && ( $header_bckOpacity && ( intval($opValue) < 100 ) ) ) $bodyClass .= ' transparent-header'; ?>

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

<nav id="mobile-navigation" class="top-navigation" role="navigation">

<?php $anyMenu = get_terms( 'nav_menu' ) ? true : false;
$menuSelect = get_theme_mod('tesseract_tho_header_menu_select');

if ( $anyMenu && ( ( $menuSelect ) && ( $menuSelect !== 'none' ) ) ) :
wp_nav_menu( array( 'menu' => $menuSelect, 'container_class' => 'header-menu' ) );
elseif ( $anyMenu && ( !$menuSelect || ( $menuSelect == 'none' ) ) ) :
$menu = get_terms( 'nav_menu' );
$menu_id = $menu[0]->term_id;
wp_nav_menu( array( 'menu_id' => $menu_id ) );
elseif ( !$anyMenu ) :
wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) );
endif; ?>

</nav><!-- #site-navigation -->

<div id="page" class="hfeed site">
<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'tesseract' ); ?></a>

<a class="menu-open dashicons dashicons-menu" href="#mobile-navigation"></a>
<a class="menu-close dashicons dashicons-no" href="#"></a>


<header id="masthead" class="site-header <?php echo get_header_image() ? 'is-header-image' : 'no-header-image'; ?>" role="banner">

<?php $logoImg = get_theme_mod('tesseract_logo_image');
$blogname = get_bloginfo('blogname');
$headright_content = get_theme_mod('tesseract_tho_header_content_content');
$headright_content_default_button = get_theme_mod('tesseract_tho_header_content_if_button');

if ( !$logoImg && $blogname ) $brand_content = 'blogname';
if ( $logoImg ) $brand_content = 'logo';
if ( !$logoImg && !$blogname ) $brand_content = 'no-brand';

?>

<div id="site-banner" class="cf<?php echo ' ' . $headright_content . ' ' . $brand_content; echo ( ( $headright_content ) && ( $headright_content !== 'nothing' ) ) ? ' is-right' : ' no-right'; ?>">

<div id="site-banner-left" class="<?php echo ( ( $headright_content ) && ( $headright_content !== 'nothing' ) ) ? 'is-right' : 'no-right'; ?>">

<?php if ( $logoImg || $blogname ) { ?>
<div class="site-branding">
<?php if ( $logoImg ) : ?>
<h1 class="site-logo"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><img src="<?php echo $logoImg; ?>" alt="logo" /></a></h1>
<?php else : ?>
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<?php endif; ?>
</div><!-- .site-branding -->
<?php } ?>

<nav id="site-navigation" class="main-navigation top-navigation" role="navigation">

<?php $anyMenu = get_terms( 'nav_menu' ) ? true : false;
$menuSelect = get_theme_mod('tesseract_tho_header_menu_select');

if ( $anyMenu && ( ( $menuSelect ) && ( $menuSelect !== 'none' ) ) ) :
wp_nav_menu( array( 'menu' => $menuSelect, 'container_class' => 'header-menu' ) );
elseif ( $anyMenu && ( !$menuSelect || ( $menuSelect == 'none' ) ) ) :
$menu = get_terms( 'nav_menu' );
$menu_id = $menu[0]->term_id;
wp_nav_menu( array( 'menu_id' => $menu_id ) );
elseif ( !$anyMenu ) :
wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) );
endif; ?>

</nav><!-- #site-navigation -->

</div>

<?php if ( $headright_content ) : ?>

<div id="site-banner-right">

<?php tesseract_header_right_content($headright_content); ?>

</div>

<?php elseif ( !$headright_content && $headright_content_default_button ) : ?>

<div id="site-banner-right">

<div id="header-button-container">
<div id="header-button-container-inner">
<?php echo $headright_content_default_button; ?>
</div>
</div>

</div>

<?php else : ?>

<div id="site-banner-right">

<div id="header-button-container">
<div id="header-button-container-inner">
<a href="/" class="button primary-button">Primary Button</a>
<a href="/" class="button secondary-button">Secondary Button</a>
</div>
</div>
</div>

<?php endif; ?>

</div>

</header><!-- #masthead -->

<div id="content" class="cf site-content">
 

fisicx

Moderator
Sep 12, 2006
46,835
8
15,467
Aldershot
www.aerin.co.uk
Adding all that code doesn't help as you need to make the changes to the theme custom.css not header.php
 
Upvote 0

BartJr

Free Member
Feb 12, 2015
248
10
It's actually very easy, give me your parameters(navigation bar font, font size and alignment) and I will paste you the code and where to put it.
I'm not sure about the font etc. I like to experiment with different sizes while constantly checking how will it look on the website. Font will probably by Roboto, font size I'm not sure yet, and align to centre
 
Upvote 0

fisicx

Moderator
Sep 12, 2006
46,835
8
15,467
Aldershot
www.aerin.co.uk
Use your browser code inspector and identify the styles. You can then copy these into the theme custom.css and tweak.

Really need to see the site to help further.
 
Upvote 0

delxyyy

Free Member
Feb 18, 2014
27
5
40
In "appearance", click "Editor" and at the bottom of the right column is Styles Stylesheet (style.css). Scroll to the bottom of style.css and add the following line
.top-navigation ul li {
font-size: 12px;
text-align: center;
font-family: 'Roboto', sans-serif;
}
 
Upvote 0

fisicx

Moderator
Sep 12, 2006
46,835
8
15,467
Aldershot
www.aerin.co.uk
Stop! Do NOT use the editor or your changes will get lost if the theme updates. Use the custom.css editor. It's part of the theme options
 
Upvote 0

Latest Articles