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">
 
Adding all that code doesn't help as you need to make the changes to the theme custom.css not header.php
 
Upvote 0
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.
 
  • Like
Reactions: BartJr
Upvote 0
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
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
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.
Thanks, I was able to edit the font, font size etc. using the google fonts but I still can't figure out how to align text to the centre (from the left alignment)
 
Upvote 0
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
Still cannot get it work, code seems to be working because the font is changing etc. but the alignment is not :(
 
Upvote 0
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