Docs

[venya]

Hello X-Team,

I have several issues I could use some help with.

On my home page, I put the header on top of a rev slider. I then tried to add the phone number and social icons that I had in the top bar to the nav bar. Through some old posts I found in the forum I came close but would like to:

1. Move contact/phone to the left
2. Make Phone number white (its red because of link)
3. Move social icons to the right of phone #
4. Make social icons larger and change color to blue
5. shift all menu items in nav bar to the right.

6. The phone number in header doesn’t look good in mobile view. How can I hide it from mobile?

7.On the blog page, How can I move the sidebar from the left side to the right side?
http://staging.riveleslawgroup.com/our-blog/

Thank you. Will send login info in a moment.

[venya]

This reply has been marked as private.

[Christopher]

Hi there,

Please provide us with the code you already added in _navbar.php file to achieve this.

Please add following code in Customize -> Custom -> CSS :

.x-social-global a {
    font-size: 29px !important;
    color: blue;
}
.x-navbar .x-container.max.width {
    width: 100%;
    max-width: 98%;
}
@media (min-width:979px){
.blog .x-main.right {
    float: left;
}
.blog aside.x-sidebar.left {
    float: right;
}
}

Hope it helps.

[venya]

This reply has been marked as private.

[Friech]

Hi There,

Thanks, but login credentials did not work, please verify. For social icons and contact number as part of the menu please follow this post: https://community.theme.co/forums/topic/using-font-awesome-icons-in-the-navigation-menu/?replyto=1028596#post-1029798 instead.

And seems you hide your Topbar? was that intended? If you wouldn’t mind please provide us with a little more clarification on what it is you’re wanting to do (perhaps a design mock-up).

We’ll be happy to provide you with a response once we have a better understanding of the situation.

Cheers!

[venya]

This reply has been marked as private.

[Christopher]

Hi there,

Remove both files _navbar-primary.php and _brand.php from child theme. Enable topbar area and we’ll help you to reduce the space.

Copy _topbar.php from framework/views/global and put it in the same path inside child theme, replace existing code with following :

<?php

// =============================================================================
// VIEWS/GLOBAL/_TOPBAR.PHP
// -----------------------------------------------------------------------------
// Includes topbar output.
// =============================================================================

?>

<?php if ( x_get_option( 'x_topbar_display' ) == '1' ) : ?>

  <div class="x-topbar">
    <div class="x-topbar-inner x-container max width">
      <?php if ( x_get_option( 'x_topbar_content' ) != '' ) : ?>
      <p class="p-info"><?php echo x_get_option( 'x_topbar_content' ); ?></p>
      <?php endif; ?>
      <div class="x-column x-1-2 x-sm"><p style="text-align: right;font-size:15px;font-style:roboto;">Contact us: <a style="color:white;" href="tel:2127580096">(212)785-0096</a>
 </p></div>
 <div class="x-column x-1-2 x-sm"><?php x_social_global(); ?></div>
    </div>
  </div>

<?php endif; ?>

Please add this CSS :

@media (max-width:480px){
a.x-btn.x-btn-rounded.x-btn-mini.alignright, a.x-btn.x-btn-rounded.x-btn-mini.alignleft {
    float: none;
    margin-right: auto;
    display: block;
    margin-left: auto;
}
}
a.x-accordion-toggle,.x-accordion-heading .x-accordion-toggle:hover {
    color: #ff2a13 !important;
}
a.x-accordion-toggle.collapsed {
    color: #272727 !important;
}

I’ve already provided you with answers for the other styling questions : https://community.theme.co/forums/topic/formatting-header/#post-1101402

Hope it helps.

[venya]

Hello Christopher,

Thank you for the detailed response. I followed your instructions and then was left with the phone number and social icons in the top bar. I was able to lower the icons to the position I want, and now would like to;

a. Move the phone number to the left of the icons.

b. remove the now empty white bar of the topbar.

c. Keep the topbar in mobile and align phone and icons all on one line.

d. In mobile sub menu, there is a line between each of the items. Tried removing with border code but still there. How can I remove the lines?

E. On my home page I’m having trouble with making the text in the slider mobile responsive. Inside Slide settings I found the dekstop/mobile toggle buttons. I clicked the mobile button and make my text narrower. I thought this would leave the desktop version of the text as it was, but it changed that as well. Then had the idea to create a second layer and hide it for mobile/desktop. What is the best way to make the text responsive?

Thank you very much!

[Christopher]

Hi there,

Please remove this code :

.x-topbar .x-social-global {
    position: absolute;
    top: 50px;
    right: 11px;
}

Update this line of php code :

 <div class="x-column x-1-2 x-sm"><p style="text-align: right;font-size:15px;font-style:roboto;">Contact us: <a style="color:white;" href="tel:2127580096">(212)785-0096</a>
 </p></div>
 <div class="x-column x-1-2 x-sm"><?php x_social_global(); ?></div>

To :

 <div class="x-column x-5-6"><p style="text-align: right;font-size:15px;font-style:roboto;padding-top: 11px;">Contact us: <a style="color:white;" href="tel:2127580096">(212)785-0096</a>
 </p></div>
 <div class="x-column x-1-6 "><?php x_social_global(); ?></div>

Add this :

.x-topbar .x-column {
    margin-right: 0;
}

.x-topbar {
    position: absolute;
    height: 0;
    width: 100%;
}
.x-navbar .mobile .x-nav li>a {
    border: none;
}

Please check this link :

https://www.themepunch.com/revslider-doc/slide-layers/#layercanvas

Hope it helps.

[venya]

This reply has been marked as private.

[Rue Nel]

Hello There,

I am another staff checking on this thread! I went ahead and fixed the issue. Here is what I did.

1] I updated the the code in your _topbar.php because it is missing a closing div.

<?php

// =============================================================================
// VIEWS/GLOBAL/_TOPBAR.PHP
// -----------------------------------------------------------------------------
// Includes topbar output.
// =============================================================================

?>

<?php if ( x_get_option( 'x_topbar_display' ) == '1' ) : ?>

  <div class="x-topbar">
    <div class="x-topbar-inner x-container max width">

		<?php if ( x_get_option( 'x_topbar_content' ) != '' ) : ?>
			<p class="p-info"><?php echo x_get_option( 'x_topbar_content' ); ?></p>
		<?php endif; ?>
    
		<div class="x-column x-5-6">
 			<p style="text-align: right;font-size:15px;font-style:roboto;padding-top: 11px;">Contact us: <a style="color:white;" href="tel:2127580096">(212)785-0096</a></p>
		</div>

		<div class="x-column x-1-6 ">
			<?php x_social_global(); ?>
		</div>

 	</div>	
  </div>

<?php endif; ?>

2] And then I also update your custom css and make use of this code:

.x-topbar {
    position: absolute;
    height: 0;
    width: 100%;
    color: #fff;
    background-color: transparent;
    border: none;
}

If you need anything else we can help you with, please let us know.

[venya]

Hello Rue Nel,

That worked perfectly! Thank you very much.

One final tweak, I was trying to get the phone number in header moved to the right to be closer to the social icons. I tried adding margin/padding both in_topbar.php and also in the custom css with .x-column .x-5-6. Nothing worked. How can I achieve this?

Thanks!

[Rue Nel]

Hello There,

To make the social icons closer the phone number, please use this code:

.x-topbar .x-social-global {
    float: none;
}

Please let us know how it goes.

[Author]

Posts