Logo and Navigation placement

Do you mean the green bar:

.navbar-inner {width: 80%;}

What size screen are you testing on as I can’t see a problem on my widescreen.

Yes, the green bar. It looks right on that first link, but the logo is small. Sorry, I didn’t include what I am trying to get to. This is a test page using this theme

https://www.fbcprincetonwv.com

[Moderator Note: Please ensure that you are embedding links correctly in your posts.]

The logo is bigger (which is what they want), but that pushes the “green bar” area down to the next line.

Thanks.

OK I see the problem. If you look at the generated HTML, you’ll see that the logo uses span5, and the navbar uses span9. As span5+span9>span12 then it has to add a new line. So we need to either reduce the size of the logo (which you don’t want to do) so we need to reduce the navbar to span7).

Add this to your child theme functions.php

// NAVBAR WRAPPER //
add_filter('tc_navbar_display', 'rdc_navbar_display');
function rdc_navbar_display($output) {
return preg_replace('|navbar-wrapper clearfix span9|', 'navbar-wrapper clearfix span7', $output);
}

This got it. A little tweaking to the style sheet and it’s right where we wanted it. Thank you.

hi. thanks for this post and i got up to this extent with my site

please see https://www.bent.co.in/wordpress/ a work-in-progress site.

if you see the nav bar has moved a lot to the right and i’m not able to upload a logo.

could you please help me with any code snippets or any other way to…
1) make both navbar and logo fit with in the carousel width and
2) why am i not able to upload a logo?

below is the css and the php child themes im using.

/*
  Author:         Me
 Template:       customizr
 Version:        1.0.0
*/

/* 3.2 Customize>Global Settings>Titles icons settings 

/* Change size of Page/Post Title */
/* h1=Page, h2=Post */
h2.entry-title, article.sticky h2 {font-size: 10px;}   /* Alternative 1 */

/* Change color of Page/Post Title */
h2.entry-title>a, article.sticky h2>a {color: #969696;} /* Change red to required color */

/* 3.1 Remove the icon and category archives header*/
header.archive-header {
display: none;
}

/* 3.1 Remove the icon before post titles */
.format-icon:before {
display: none;
}

/* change Grey Bar to white  2px=thickness, solid=style (dotted - dashed - solid - double - groove - ridge - inset - outset), green=color */
header.tc-header {
border-bottom:  5px solid white;
}

.carousel-caption {
max-width: 60%; /* was 60% */
margin-left: 2%; /* was 11% */
padding: 2%;  /* was 5% */
position: absolute;
left:10%;
bottom:0px; /* hugs the bottom of the slider */
}
/* shrink the Title field */
.carousel-caption h1 {
font-size: 18px; /* was inherited from h1 (38.5px) */
line-height: 1.25; /*was 1.25 */
}
/* shrink the description field */
.carousel-caption .lead {
font-size: 12px; /* was inherited from lead (21 px) */
line-height: 1.25; /* was 1.25 */
}

/* move menu button in mobile mode to left & change properties  */
.navbar .btn-navbar {
background-color: transparent;
    background-image: none ;
    background-repeat: repeat-x;
    border-color: transparent;
    box-shadow: none;
    color: #333;
    float: left;
    margin-left: ;
    margin-right: ;
    padding:  ;
    text-shadow: none;
	width:   90px;
	height:  ;
	vertical-align: ;
}
.navbar .btn-navbar:hover,
.navbar .btn-navbar:focus,
.navbar .btn-navbar:active,
.navbar .btn-navbar.active,
.navbar .btn-navbar.disabled,
.navbar .btn-navbar[disabled] {
  color: #333 ;
  background-color: transparent;
  *background-color: transparent;
}
/* menu button in mobile mode  */
.btn-navbar {
}
.btn-navbar:after {
content:        "menu";
font-family: 'verdana';
float:          right;
font-weight: bold;
margin:         -16px 0 0 0;
}
/* menu button in mobile mode - drop down  */
.nav-collapse, .nav-collapse.collapse {
text-align: left;
float:inherit;
} 

/* change tagline style, colour, font  */
.navbar-wrapper .navbar h2 {
color:          grey;
font-style: normal  ;
font-weight: normal ;
}
h2.site-description {
color:          grey;
font-style: normal  ;
font-weight: normal ;
}

.navbar-wrapper .navbar h2, h2.site-description {
/* Change (red) font color   */
color:         grey;
/* Change (Garamond) font family
font-family:    Garamond;*/
/* Change (20px) font size      */
font-size:      14px;
/* Change (19%) move to left
padding-right:  19%;*/
/* Change (normal) italic-normal-oblique
font-style:     normal;*/
}

/* header back ground Adjust the Image location (wp-content/uploads/texture.jpg) */
 header.tc-header{
background: url(../../uploads/2014/09/logo.jpg) no-repeat  ;
}

/* Move SI to Right, adjust margins if needed   */
.navbar-inner .social-block {
float:          right;
margin-top:     5px;
margin-right:   0px;
text-align:     right;
}
/* Move Tagline to Left    */
.navbar-wrapper .navbar h2 {
float:          left;
margin-top:     5px;
margin-left:    5px;
text-align:     left;
}

/* slider options  */ 

.carousel-control {
color: #FFF;
}
.carousel-caption h1{
  font-size:  ;
}

.carousel-caption p{
  font-size:  ;
} 

.carousel-caption {
 background: rgba(0, 0, 0, 0);
}

/* slider options Example move to bottom-left
.carousel-caption {
position:   relative;
top:        100px;      /* 0px is top of element */
left:       -10%;       /* 0% is left of element */
}
*/

/*  Reposition Navbar Box - change top/left as needed */
.navbar.notresp .navbar-inner {
position:       relative;
 top:            0px;       /* Adjust using -1px move Up, 1px move Down, 0px No change  */
 left:           -5%;             /*Adjust using -1% move Left, 1% move Right, 0% No change  */
}

/*  Adjust Navbar Box settings      */
.tc-header, .navbar.notresp .navbar-inner  {
background-color:   #FFF;                   /* Change pink */
background-image: none;   /*linear-gradient(to bottom, white, pink);       Change white, pink */
background-image: none;   /*-webkit-linear-gradient (top, white, pink);    Change white, pink */
background-repeat: ;
border: none;            /* 1px solid pink;          Change [1]px, pink */
border-radius: ;      /*4px 4px 4px 4px;         Change [4]px */
box-shadow: none;         /*0 1px 4px rgba(0, 0, 0, 0.067);*/
min-height:         25px;                   /* Change [40]px */
/*padding-left:       20px;                   /* Change [20]px */
/*padding-right:      20px;                   /* Change [20]px */
}

/* hide Social Icons         */
.social-block a     {display:none;} 

/* Remove Post/Page Icon */
.page #main-wrapper h1.format-icon:before {
content:    none;
}
/* Change size of Page/Post Title */
/* h1=Page, h2=Post */
h1.entry-title, h2.entry-title {font-size: 30px;}   /* Alternative 1 */
/* Change color of Page/Post Title
h1.entry-title>a, h2.entry-title>a {color: red;}    /* Change red to required color */

/* hide breadcrumbs
.breadcrumbs {
display: none;
}*/ 

/* hide featured page buttons */
.btn.btn-primary.fp-button {
    display: none;
}

/* ================================================ */
/* Responsive - Media queries                       */
/* Based on:                                        */
/* https://lab.maltewassermann.com/viewport-resizer/ */
/* ================================================ */

/* ============================================== */
/* HDTV                                           */
/*                                      1920x1080 */
/* ============================================== */
@media screen and (min-width: 1080px) and (max-width: 1920px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .

}

/* ============================================== */
/* Widescreen                                     */
/*                                       1280x800 */
/* ============================================== */
@media screen and (min-width: 800px) and (max-width: 1280px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .

}

/* ============================================== */
/* Twitter Bootstrap                              */
/*                                       980x     */
/* ============================================== */
@media screen and (min-width: 980px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */

}

/* ============================================== */
/* Twitter Bootstrap                              */
/*                                       x979     */
/* ============================================== */
@media screen and (max-width: 979px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */

}

/* ============================================== */
/* iPad Landscape & Portrait                      */
/*                                       1024x768 */
/* ============================================== */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .

}

/* ============================================== */
/* iPad Landscape                                 */
/*                                       1024x768 */
/* ============================================== */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .

}

/* ============================================== */
/* iPad Portrait                                  */
/*                                       768x1024 */
/* ============================================== */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .

}

/* ============================================== */
/* Small Tablet Landscape/Portrait                */
/*                                        800x600 */
/* ============================================== */
@media screen and (min-width: 600px) and (max-width: 800px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
}

/* ============================================== */
/* iPhone5/Android landscape (& narrow browser)   */
/*                                        568x320 */
/* ============================================== */
@media screen and (min-width: 320px) and (max-width:568px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
}

/* ============================================== */
/* iPhone4/Android landscape (& narrow browser)   */
/*                                        480x320 */
/* ============================================== */
@media screen and (min-width: 320px) and (max-width:480px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
}

/* ============================================== */
/* iPhone4/Android portrait               320x480 */
/* iPhone5 portrait                       320x568 */
/* ============================================== */
@media screen and (max-width:320px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
}

/* ============================================== */
/* Smaller devices                                */
/* Android Landscape                      320x240 */
/* ============================================== */
@media screen and (min-width:240px) and (max-width:320px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
}

/* ============================================== */
/* Smaller devices                                */
/* Android Portrait                       240x320 */
/* ============================================== */
@media screen and (max-width:240px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
}

<?php
//adds the script in the head of your theme
add_action ('wp_head' , 'add_fb_button_script');

function add_fb_button_script() {
    ?>
        <div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
    <?php
}

//adds the button on the right to the social icons in header
add_filter ('tc_social_in_header' , 'add_fb_button', 10, 2);
function add_fb_button($html, $resp) {
    $class =  ('resp' == $resp) ? '':'span5'
    ?>
    <div class="social-block <?php echo $class ?>">

        <?php if ( 0 != tc__f( '__get_option', 'tc_social_in_header') ) 

: ?>
               <?php echo tc__f( '__get_socials' ) ?>
           <?php endif; ?>

         <img class="alignnone wp-image-643 size-full" src="https://bent.co.in/wordpress/wp-content/uploads/2014/12/phone.png" alt="phone" width="18" height="18" /></a>?+91 98452 72320 &nbsp;&nbsp;&nbsp;
         <div class="fb-like" data-href="https://www.facebook.com/bentbydesign" data-width="50" data-colorscheme="light" data-layout="button_count" data-action="like" data-show-faces="false" data-send="false"></div>
     </div><!--.social-block-->
    <?php
}

//change footer content
add_filter('tc_credits_display', 'my_custom_credits');
function my_custom_credits(){
$credits = '';
$newline_credits = 'Theme designed by Themes & Co';
return '
<div class="span4 credits">
                    <p>· ? Bent by design '.esc_attr(get_bloginfo()).' · '.($credits ? $credits : '').''.($newline_credits ? $newline_credits.' ·' : '').'</p>      </div>';
}

//slider decription text in multiple lines
add_filter('tc_slide_text_length', 'my_tc_slide_text_length');
function my_tc_slide_text_length(){
    return 1000; /*change this value to suit your needs*/
}
add_filter('tc_slider_display', 'do_my_shortcode');
function do_my_shortcode($html){
    return do_shortcode(html_entity_decode($html));
}
add_shortcode('htmlify', 'do_html');
function do_html($attr, $content){
    return str_replace(array('{','}'), array('<','>'), $content);
}