Arrangement of logo, menu and social icons in header – question

  • Resolved Sarah

    (@designdonewell)


    10 years, 11 months ago

    I’ve used the snippets to push the social icons to the right, remove the description, and hide the nav box. Also modified the functions.php file to alter the spans for positioning of logo, menu and social icons:

    // LOGO //
add_filter('tc_logo_text_display', 'rdc_custom_center_brand');
add_filter('tc_logo_img_display', 'rdc_custom_center_brand');
function rdc_custom_center_brand($output) {
return preg_replace('|span3|', 'span3', $output);
}

// NAV BAR //
add_filter('tc_navbar_wrapper_class','my_navbar_wrapper');
	function my_navbar_wrapper(){
		return 'navbar-wrapper clearfix span7';
}

// SOCIAL ICONS //
add_filter('tc_social_in_header', 'rdc_social_in_header');
function rdc_social_in_header($output) {
return preg_replace('|span5|', 'span1', $output);
}

    1st question: I feel like in the header, the div for the social icons comes in before the menu nag, is this correct?
    My goal: to vertically align the menu and social icons to the bottom of the navbar-wrapper.
    2nd question: Do I need to modify header.php file to rearrange these elements, or am I really just overlooking the css piece to that I need to tweak? I’ve been staring at it too long and can’t see what I’m missing.

    Website located here

    Thanks in advance for the help!!

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

  • I would use:
    1) navbar-wrapper clearfix span9 for navbar
    2) This to move social block after menu:

    add_action('wp_head', 'reorder_header');
function reorder_header(){
    // detach social block
    remove_action('__navbar', array(TC_header_main::$instance, tc_social_in_header), 10);
    // insert social block after menu
    add_action('__navbar', array(TC_header_main::$instance, tc_social_in_header), 40);
}

    3) Then here:

    .navbar-inner .social-block {
float: right;
margin-top: 0px;
margin-right: 0px;
}

    remove float: right; and add text-align: left;
    4) position of the navbar:
    here

    .navbar .navbar-inner {
margin: 20px 5px 0;
top: 3%;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
background: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}

    remove margin and top property.
    5) Add this new rule to style just the notresp navbar

    .navbar.notresp .navbar-inner {
position: relative;
top: 45px;
}

    This should look fine.
    Sorry if I made some mistakes, it’s not easy do this css changes “live” without forget something.

    Hope it will work.

    Thread Starter Sarah

    (@designdonewell)

    That’s brilliant! Worked like a charm ?? need to add an @media for the social icons so they float right when on mobile & small screens, but otherwise worked just beautifully!

    Thank you so much, d4z_c0nf ! I never could have figured out those hooks on my own.

    ??

    Good you solved.

    ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Arrangement of logo, menu and social icons in header – question’ is closed to new replies.