[seelevelmktgParticipant]

I am needing to copy the look of the header of this website: https://www.creativedesigns-llc.com.
We are creating a separate blog site and basically the past web developer used a really bad theme to build the site I’m trying to replicate.. making it impossible to easily rebuild on this new blog site.
So I’m using X Theme. However, how do I remove the navigation menu on the right and replace with the header widget so I can replicate the logo on the left, social media icons on the right? And would I make the navigation menu be fullwidth underneath the logo with a header widget?
Thanks for you help

[seelevelmktgParticipant]

I forgot the give you the url of the site I’m working on, it’s: https://www.creativedesigns-llc.com/blogs/

[FriechModerator]

Hi There,

Thank you for writing in! First you can easily bring down the menu and centering it by navigating to Customizer > Header and set the Layout to Stacked. Then to bring the logo on the left side add this on your custom CSS.

a.x-brand.img {
    float: left;
}

Now the custom part adding a widget area on the right side of the logo needs a child theme so install a child theme first. Follow the guide on the post provided below.

How to Setup Child Themes

Also create a new Sidebar that we will be using for this, navigate to Appearance > Sidebar create a new sidebar and take note of its ID.

Then on your child theme navigate to this directory: \x-child\framework\views\global\, there create a file named _navbar.php and paste the code below on it.

<?php

// =============================================================================
// VIEWS/GLOBAL/_NAVBAR.PHP
// -----------------------------------------------------------------------------
// Outputs the navbar.
// =============================================================================

$navbar_position = x_get_navbar_positioning();
$logo_nav_layout = x_get_logo_navigation_layout();
$is_one_page_nav = x_is_one_page_navigation();

?>

<?php if ( ( $navbar_position == 'static-top' || $navbar_position == 'fixed-top' || $is_one_page_nav ) && $logo_nav_layout == 'stacked' ) : ?>

  <div class="x-logobar">
    <div class="x-logobar-inner">
      <div class="x-container max width">
        <?php x_get_view( 'global', '_brand' ); ?>
        <div class="custom-widget right"><?php dynamic_sidebar('SIDEBAR ID HERE');  ?></div>
      </div>
    </div>
  </div>

  <div class="x-navbar-wrap">

    <div class="<?php x_navbar_class(); ?>">
      <div class="x-navbar-inner">
        <div class="x-container max width">
          <?php x_get_view( 'global', '_nav', 'primary' ); ?>

        </div>
        
      </div>
    </div>
  </div>

<?php else : ?>

  <div class="x-navbar-wrap">
    <div class="<?php x_navbar_class(); ?>">
      <div class="x-navbar-inner">
        <div class="x-container max width">
          <?php x_get_view( 'global', '_brand' ); ?>
          <?php x_get_view( 'global', '_nav', 'primary' ); ?>
        </div>
      </div>
    </div>
  </div>

<?php endif; ?>

Replace the SIDEBAR ID HERE with the actual sidebar ID.

Let us know how it goes.

Cheers!

[seelevelmktgParticipant]

Thanks for your response. I followed all the instructions and it doesn’t seem to be working: https://www.creativedesigns-llc.com/blogs

An additional question: I need the header & nav menu to be fullwidth (as it is now), however, I need the body of the page to be in block form (example of the look is here: http://www.creativedesigns-llc.com/blog/). How do I achieve that?

Thanks

[Nabeel AModerator]

Hi again,

You can also achieve it by enabling the Topbar with social icons and in Topbar Content add your logo:

<img src="//www.creativedesigns-llc.com/blogs/wp-content/uploads/2017/03/logo1.png" alt="">

If this doesn’t help then please provide us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[seelevelmktgParticipant]

This reply has been marked as private.

[JadeModerator]

Hi there,

I would like to check further including the changes you did in the child theme as suggested by Friech but kindly provide us with your FTP details as well so that we can assist you further.

Thank you.

[seelevelmktgParticipant]

This reply has been marked as private.

[FriechModerator]

This reply has been marked as private.

[seelevelmktgParticipant]

This reply has been marked as private.

[FriechModerator]

This reply has been marked as private.

[seelevelmktgParticipant]

This reply has been marked as private.

[seelevelmktgParticipant]

OK I got the social media icons to show off to the right.

Also, I need help with the following (previously mentioned):
1) I’d like the header of the site to be fullwidth and the content (body) underneath to be blocked, such as this: http://www.creativedesigns-llc.com/blog/
2) I’d like to add a widget area underneath the navigation menu
3) I’d like the sidebar to be “nested” underneath navigation menu, not a full height sidebar. Example of what it looks like is: https://www.creativedesigns-llc.com/kitchen-bath-industry-show-kbis-2017/
4) And I can’t figure out how to get rid of the orange background on the blog post I created? I’ve looked all through customizer and can’t find the background color: https://www.creativedesigns-llc.com/blogs/?p=52&preview=true

[LelyModerator]

Hi There,

1.) It is fullwidth when I checked.
2.) We can use Slider Settings: Below Masthead. That is a below navigation, but it is still depend what kind of widget you want to add. Or we can add the following code on your child theme’s functions.php file.

add_filter( 'x_before_the_content_begin', 'add_content_after_navigation' );
function add_content_after_navigation(){
    echo"<div>Replace this with you content</div>";
}

3.) By default, Icon stack sidebar is fixed. That is possible with other stacks. Each stack has different design and functionalities and we can’t mix and match those.

4.) Look for this custom CSS:

.format-standard .entry-wrap {
    color: #3a2d0d !important;
    background-color: #ff8902 !important;
}

Remove the background color.

Hope this helps.

[seelevelmktgParticipant]

Basically, I’m looking to add a logo, category dropdown menu and a text link in this widget area. I need it to be directly below the site navigation… so I don’t think adding a slider would fit that description.
So if I were to add the
add_filter( ‘x_before_the_content_begin’, ‘add_content_after_navigation’ );
function add_content_after_navigation(){
echo”<div>Replace this with you content</div>”;
}
What would I put in the “replace with your content”… would I put a reference to a widget I want to use? Or would I create another sidebar and put that reference in there? I tried to create sidebar and stick in the ID, but that didn’t work.

I changed the stack and that fixed the blog sidebar, thanks.

[Author]

Posts