Support » Themes and Templates » How to align my header widget to the right?

  • Resolved dandanwoo


    I’ve been reading all the “how to align the header widget to the right?” topic, but seems none works for my page.

    I spent few days learning to make my social icons widget from the sidebar to the header area, finally I did it. But now I really can’t find a solution for moving it to the right side of the header. Please help me!!!

    My site:

    Please let me know which file and where exactly I should change the code.

    Thanks in advance!

Viewing 8 replies - 1 through 8 (of 8 total)
  • Michael


    Forum Moderator

    the section is causing invalid html code;

    Error Line 51, Column 18: Element li not allowed as child of element div in this context. (Suppressing further errors from this subtree.)

    what code did you use to integrate the header widgets?

    once you have fixed the invalid <li> tag, try to add something like this to the styles:

    #header .block-content { float: right; margin-top: -80px; }

    Hi alchymyth, thanks for your quick replies.

    you meant the header.php or the plugin files?

    the header code is here:

    <?php /* Mystique/digitalnature */ ?>
    <!DOCTYPE html>
    <html <?php language_attributes(‘html’); ?>>

    <head profile=”″>
    <meta http-equiv=”Content-Type” content=”<?php bloginfo(‘html_type’); ?>; charset=<?php bloginfo(‘charset’); ?>” />

    <title><?php bloginfo(‘name’); ?> <?php wp_title(‘|’, true); ?></title>

    <link rel=”stylesheet” type=”text/css” media=”all” href=”<?php bloginfo(‘stylesheet_url’); ?>” />
    <link rel=”pingback” href=”<?php bloginfo(‘pingback_url’); ?>” />
    <link rel=”pingback” href=”<?php bloginfo(‘pingback_url’); ?>” />

    <?php if(is_singular() && get_option(‘thread_comments’)) wp_enqueue_script(‘comment-reply’); ?>

    <?php wp_head(); ?>

    <body <?php body_class(‘col-2-right fixed’); ?>>

    ‘container_class’ => ‘nav nav-top’,
    ‘menu_class’ => ‘menu page-content clear-block’,
    ‘theme_location’ => ‘top’,
    ‘fallback_cb’ => ”,

    <!– page –>
    <div id=”page”>

    <div id=”page-ext”>

    <!– header –>
    <div id=”header”>
    <div class=”page-content”>
    <div id=”site-title” class=”clear-block”>
    <?php mystique_logo(); ?>
    <?php if(get_bloginfo(‘description’)): ?><div class=”headline”><?php bloginfo(‘description’); ?></div><?php endif; ?>

    <?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘sidebar-2’) ) : ?>
    <?php endif; ?>


    <div class=”shadow-left page-content”>
    <div class=”shadow-right nav nav-main”>
    ‘menu_class’ => ‘menu fadeThis clear-block’,
    ‘theme_location’ => ‘primary’,
    ‘fallback_cb’ => ‘mystique_page_menu’, // default menu
    ‘link_after’ => ‘<span class=”p”></span>’, // pointer arrow on 1st level

    <!– /header –>

    <!– main –>
    <div id=”main” class=”page-content”>
    <div id=”main-ext” class=”clear-block”>”

    social media plugin i’m using is Nino Social, it has a bunch of Plugin Files


    the plugin files also include


    The errors in the link you showed me, I don’t know how to fix any of them…. :((
    I’m original a graphic designer, only know very limited knowledge of web code thing. Please help.

    I found that code in function.php

    function mystique_widgets_init(){

    // one sidebar, even though the theme supports 3 columns (because there’s no interface to switch the layout)
    ‘name’ => __(‘Primary Sidebar’, ‘mystique’),
    ‘id’ => ‘sidebar-1’,
    ‘before_widget’ => ‘<li class=”block”><div class=”block-content block-%2$s clear-block” id=”instance-%1$s”>’,
    ‘after_widget’ => ‘</div>’,
    ‘before_title’ => ‘<div class=”title”><h3>’,
    ‘after_title’ => ‘</h3><div class=”bl”></div><div class=”br”></div></div>’

    ‘name’ => __(‘Head Area’, ‘mystique’),
    ‘id’ => ‘sidebar-2’,
    ‘before_widget’ => ‘<li class=”block”><div class=”block-content block-%2$s clear-block” id=”instance-%1$s”>’,
    ‘after_widget’ => ‘</div>’,
    ‘before_title’ => ‘<div class=”title”><h3>’,
    ‘after_title’ => ‘</h3><div class=”bl”></div><div class=”br”>



    But how to fix it?

    I copied you code into style.css under /*** BLOCKS (usually widgets) ***/

    And it works. But I didn’t fix the error, don’t know if it will cost problem later…



    Forum Moderator

    change this section in the register code of the second sidebar:

    'id' => 'sidebar-2',
    'before_widget' => '<li class="block"><div class="block-content block-%2$s clear-block" id="instance-%1$s">',
    'after_widget' => '</div>',


    'id' => 'sidebar-2',
    'before_widget' => '<div class="block-content block-%2$s clear-block" id="instance-%1$s">',
    'after_widget' => '</div>',

    and probably increase the margin in the new style to at least -45px

    Hi alchymyth, thanks for your help these days, now the problem solved!

    the code #header .block-content { float: right; margin-top: -80px; } under /*** BLOCKS (usually widgets) ***/ works better.

    Appreciate it!!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘How to align my header widget to the right?’ is closed to new replies.