I’m building a new website for our company. Our tech-support service set-up a WordPress site for us and installed the X theme, which I’m finding very useful indeed! The development space for the site is publicly accessible so we can all access development changes from anywhere. However, I don’t want to broadcast the URL across the internet at the moment. I’ll send you the address in a private follow-up message.

I have a few questions about a fairly diverse range of topics. I’ve searched the forums for existing suggestions but all seem angled towards situations that don’t apply to me. Apologies if I’ve missed something relevant.

As it stands I’m dealing with the homepage only – all the other pages are there as placeholders for now. I’ll start at the top of the page and work down.

Navbar Margins/Padding
I have the theme set to full width. However, the logo and the navbar menu are significantly indented. How can I alter this? The logo is also quite wide. Is there a way to force a logo-rescale on smaller screens/devices?

Social Links in Header Widget Area
I would like to have the social media links in header widget area 2 rather than on the top bar (which I deactivated). Is there a simple way to do this? I’ve tried using some shortcodes and html in the widget editing page but nothing seemed to work.

Revolution Slider Proportions and Scaling
Is it possible to force the Revolution Slider to scale/proportion itself to fit an area? Notice in the latest news & events area at the top of the page that the slider doesn’t fit the space allocated to it. I’d really like to find a way round this without undermining responsiveness if possible.

Turning Custom Heading into Link with Hover Properties
Towards the bottom of the page on the right-hand side is our main area for social media links (the picture is a placeholder for a live tweet widget). I’d like to turn the headings into buttons linking to the various social media sites. I want the default colours to be as they appear here (not the default yellow I’ve set in the customizer) and the hover colour to match the usual button settings (yellow on a grey background). Is there a way of doing this? Note that I’ve used columns within the custom headings to ensure nice spacing between the icons and the text.

Odd Horizontal Alignment
In the same area of the page the column headings are at different heights and I’m not sure why. Any ideas?

Remove Shadow Property from Button Text
Is there a way to do this? I’m not even sure there is a shadow property on button text – it might just be my eyes going funny! Either way, it would be useful to know how to alter it just in case I need that knowledge in future.

Apologies for any shoddy workmanship – I’m really quite new to this.

Thanks again for a great theme!

Adam

Thanks for writing in!

Below are answers to your question, please note that all css must be added to the Customizer > Custom > CSS

1. Navbar
The theme is full width but site width and max width are set to 88% and 1200px, this is a good idea to keep it like this, for your nav and logo, you can hack this by adding the following css:

/* Navbar width */
.x-navbar-inner{
  width:92%!important; /* Adjust to your preference */
}

/* Small device logo size */
@media all and(max-width:768px){
  .x-navbar .x-brand{
    max-width: 280px;
    margin-top: 18px;
  }
}
@media all and(max-width:440px){
  .x-navbar .x-brand{
    max-width: 240px;
    margin-top: 22px;
  }
}
@media all and(max-width:360px){
  .x-navbar .x-brand{
    max-width: 220px;
    margin-top: 18px;
  }
}

2. Social
You should be able to add social media shortcode inside a text widget in the header widget area. Please to add those again and if you encounter problems, let us know, you might have to provide us a login to your admin so we will be able to check this in details.(!!!If you share your login info, make sure to set this post as private!!!)

3. Revslider
This will be really difficult to achieve, for now, you can try the code below as this will work nicely on wide screens, but resizing to smaller ones, the revslider will have some space under it as it’s responsive features, make it proportional.

/* Remove a bit of margin and padding to the big headline so the gap under the slider will be smaller */
#x-content-band-2{
  margin-bottom:0!important;
  padding:37px 0!important;
}
/* Make the rev slider container wider to span the full available space */
#x-content-band-1 > .x-column.two-thirds{
  width: 69.33332%;
}

4. Custom Headings
Please make those heading as links in your editor first, then we will be able to come back to you with some tailored custom code to add

5. Alignment

#x-content-band-9 .h-custom-headline{
  padding-top:8%!important;
}

6. Text shadow
To remove text shadow from buttons, just add this custom css:

.x-btn, .x-btn:hover, 
.button, .button:hover, 
[type="submit"], [type="submit"]:hover{
  text-shadow:none!important;
}

I hope this answer most of your questions :), come back to us if you need anything else.

Cheers.

Thank you for your comprehensive response, which was most helpful. Unfortunately the Navbar hack seems not to be working for some reason. Perhaps I’m missing something.

I can’t seem to find a shortcode for social media links other than for social sharing. I want the buttons in the header widget to link to our Twitter, Facebook and YouTube accounts. Again, perhaps I’m missing something.

Thanks for your help with the Revolution Slider problem. It’s a shame that the slider isn’t more space-responsive, although I appreciate this is an add-in and not an integral part of your theme. I’ll have a play around with it and see what I can do. We may have to rethink the design to best suit the tools.

I have changed the custom headings into links as requested.

Best Wishes,

Adam

However, the logo still doesn’t want to scale when I resize the browser or when I look at it on a mobile device.

Best Wishes,

Adam

The following CSS will adjust the logo in small devices, please add them via Customizer:

/* Small device logo size */
@media all and(max-width:768px){
  .x-navbar .x-brand{
    max-width: 280px;
    margin-top: 18px;
  }
}
@media all and(max-width:440px){
  .x-navbar .x-brand{
    max-width: 240px;
    margin-top: 22px;
  }
}
@media all and(max-width:360px){
  .x-navbar .x-brand{
    max-width: 220px;
    margin-top: 18px;
  }
}

Hope this helps, Cheers!

You can add the icon on the header widget by using the Text/HTML widget and add this code below

<a target="_blank" href="http://your-social-media-url.com/">[icon type="facebook"]</a>

You can get all the icon list from here -> http://theme.co/x/demo/integrity/1/shortcodes/icons/

Hope that helps
Cheers