Docs

[fantasy_5]

Hi!

How are you guys doing today? Anywho, I have spent a bit of time reading several threads to see if I can accomplish my heart’s desire. I am currently using the Integrity stack and setting up an online store. The Name of my Store is Shop At KEI I would like to write directly below it “ready to wear threads.” I did see the top bar option, but I’m not interested in adding anything additional that will add to the current white space above the logo. I will attach two screen shots. One will show my site and the other is an image of another site that shows the look I’m going for. I would also like to add Currency US $ to the left below the tagline and header text and additional icons or text to the right on that same line just like in the image.

Here are a few links from threads I’ve read so far.
https://community.theme.co/forums/topic/site-titletagline-issues/
https://community.theme.co/forums/topic/subtitles-for-posts/

Additionally, is it possible to set up the demo content her for the shop page only or to achieve this look with rev slider or cornerstone?

Home

My website isn’t live yet, but the link is

Home

[fantasy_5]

Images were too big here goes….

[fantasy_5]

My website….

[Lely]

Hello There,

Thank you for the complete information.
What you want to achieve will need a little customization.
Assuming you have child theme setup already, please copy the file: _navbar.php from this folder: \wp-content\themes\x\framework\views\global to your child theme here:\wp-content\themes\x-child\framework\views\global.

Open the copied file and replace the content with the following:

<?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>
      </div>
    </div>
	<div id="below-logo-container">
		<div class="x-column x-sm x-1-3" > Currency Content here</div>
		<div class="x-column x-sm x-1-3 center-text" > <label>ready to wear threads. </label></div>
		<div class="x-column x-sm x-1-3 right-text" > <?php echo do_shortcode('[x_icon type="home"] [x_icon type="user"]'); ?> </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; ?>

As you can see, we have added this part:

	<div id="below-logo-container">
		<div class="x-column x-sm x-1-3" > Currency Content here</div>
		<div class="x-column x-sm x-1-3 center-text" > <label>ready to wear threads. </label></div>
		<div class="x-column x-sm x-1-3 right-text" > <?php echo do_shortcode('[x_icon type="home"] [x_icon type="user"]'); ?> </div>
	</div>

Feel free to customize the content. You may refer to this link for the icons:

Icons

Also add the following CSS on Appearance > Customize > Custom > Edit Global CSS for some spacing:

div#below-logo-container>div:first-child {
    padding-left: 20px; /* Space of the left content from browser edge*/
}

div#below-logo-container>div:last-child {
    padding-left: 20px; /* Space of the right content icons from browser edge*/
}

div#below-logo-container>div:nth-child(2)>label { /*in case you want to style the center text content*/
    font-size: 20px;
    text-transform: uppercase;
}

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

[fantasy_5]

Hi, Lely!

Thanks so much for your help. Everything is just about where I need it to be. However, is there a way to have the last icon end just above where the menu ends and put more space between the icons? I changed the line of code from 20px to 40px for the icons, but I can see no visual adjustment even after clearing all cache, but adjusting from 20px to 30 for the word currency worked just fine. Additionally, is it possible to add a bit more space to separate the distance between the menu bar and new container so that it is closer to “shop At Kei rather than the menu? Also, would like the new containers’ background to remain white no matter what the actual individual page background color is. I am attaching 2 screen shots.

[Christopher]

Hi tehre,

Please update your code to :

div#below-logo-container>div:last-child {
    margin-right: 2%;
    width: 28%;
}

Add this :

div#below-logo-container .right-text i {
    padding-left: 10px;
}
.x-logobar-inner {
    padding-bottom: 0;
}

div#below-logo-container {
    margin-bottom: 16px;
    background-color: #fff;
    overflow: hidden;
}

Hope it helps.

[fantasy_5]

Hi, Christopher!

Thanks so much! Everything looks great… in terms of proper spacing etc. I would just like to bring the white background in the container down a bit more if this is possible. Here is the full code just in case someone else needs to do a similar global css customization to add subtitle, icons, and currency type. I have also attached a screenshot displaying the new changes. 🙂

div#below-logo-container>div:first-child {
    padding-left: 30px; /* Space of the left content from browser edge*/
}

div#below-logo-container>div:last-child {
    margin-right: 2%;
    width: 28%;
}

div#below-logo-container>div:nth-child(2)>label { /*in case you want to style the center text content*/
    font-size: 20px;
    
}

div#below-logo-container .right-text i {
    padding-left: 10px;
}
.x-logobar-inner {
    padding-bottom: 0;
}

div#below-logo-container {
    margin-bottom: 16px;
    background-color: #fff;
    overflow: hidden;
}

Finally, you can add custom links to the shortcodes so that when clicked they go to a specific page.
<a href="your link goes here">[x_icon type="envelope"]</a>
Thanks so much for all of your help; you guys rock!

[Jade]

You’re welcome and thanks for sharing your solution!

[fantasy_5]

You’re welcome, but I still need to know how to make the additional space between the currency section and menu remain white no matter what the actual page background color is.I would just like to bring the white background in the container down a bit more if this is possible.

[Friech]

Hi There,

We can not view your site (https://shopatkei.com/), please deactivate the Maintenance Mode or provide us login credentials in private reply so we can take a closer look.

Thanks.

[fantasy_5]

This reply has been marked as private.

[Friech]

Hi There,

The space below the “Currency US $” issue seems to be resolve by this custom CSS? Try adding back your background image.

div#below-logo-container {
    margin-bottom: 16px;
    background-color: #fff;
    overflow: hidden;
}

Add this on your custom CSS to arrange the 1/3 columns on mobile view.

@media (max-width:  767px) {
	div#below-logo-container>.x-1-3 {text-align: center;}
	div#below-logo-container>.x-1-3:first-child {padding-left: 0;}
	div#below-logo-container>.x-1-3:last-child {width: 100%;}
}

Hope it helps, Cheers!

[fantasy_5]

None of the background images have been removed. Everything is set up just as I want it. I just want to make sure the white background within the new container goes from the top of the container to the bottom meeting the menu so that no background can be seen on any page where there are backgrounds other than solid white. I am reattaching the image and have circled the area I am referring to…
This page is a perfect example, but you will need to log in to view it. the site isn’t live yet.

https://shopatkei.com/melanin-crown/

[Friech]

Hi There,

Yeah thanks for the direct link, I did try to look for that page earlier but I did not see it. Anyways to make sure that part always have a white background, please add this on your custom CSS

#top {background-color: #fff !important;}

This should be the default case as that part is on the header (with white background-color). But it was not because the x-navbar and x-breadcrumb are outside of the masthead (which should not be).

If you have any further issue regarding this, please provide us FTP credentials in private reply so we can take a closer look why your masthead is structure like this.

Thanks.

[fantasy_5]

Thanks so much, Friech! That did the trick. However, I’m not sure why the nav bar and breadcrumbs are outside of the masthead… might be due to some of the customizations. You’re one smart cookie, my issue is resolved. Have a great weekend ahead. 🙂

[Author]

Posts