[Pam LParticipant]

Hello X Theme Support!
I’m a graphic designer who works mostly in print, so I’m a babe in the woods when it comes to web sites. I have been working hard to learn how to use your theme, viewing documentation, video tutorials and searching for answers in the forum. My very simple site has taken 3 days because I’m a beginner. I understand many of the basic concepts now and where to find many settings, but I’m struggling on a few issues.

Website is carolbradley.com
WordPress 3.8.1 running X Renew theme
(not sure of X version, but just downloaded it last week)

On the home page, I would like to have a content band with the elephant image you see here. Currently it’s in there as a “featured image” and I know that’s probably the wrong thing to do, but for now that’s the best I can do. I tried to work on an alternate home page at carolbradley.com/renew-test/ where the image is in a content band I believe, but I can’t figure out how to get it to go to the edges. When I edit the content band and click “remove margins” all my text and photo below go away and the image still doesn’t go to the page edge.

Back on the actual home page, there are several areas where there is probably a padding setting that needs to be adjusted, or perhaps there are content bands that need to be deleted. It would be nice to get the elephant image which is 700 pixels wide (same as the maximum page width) to butt up right under the header pink color, go the edges and have just 20 pixels or so before the page content begins.

My client liked the look of Renew 3 (which had a Revolution Slider) where I am trying to put this elephant image. I have the page template set to “Layout-Full Width” and I have the page title disabled. (Am I needing to find the place to not show the area where the page title would go?) There is a faint gray border above my elephant image that I’m guessing is the border for a content band??? But is it actually part of the header and not the page template?

At the bottom of all of my pages is a gray band right above the footer. Is that also something I must somehow remove?

I look forward to your advice. My client is quite pleased with her very clean, flat layout, but will be even happier when I’m able to resolve these issues.
Pam

[ChristianModerator]

Hey Pam,

Please try to use the Blank – No Container | Header Footer page template. Then, remove the inner container of the first content to allow the image (elephant) to span the whole width (this is referring to carolbradley.com/renew-test/). For the homepage, please remove the Featured Image and follow the setup of your test page.

The area above your content is the header landmark which houses the page title and the breadcrumbs.

The gray area below is the footer widgets area which houses footer widgets.

If you don’t need to use them, you can hide them using CSS. In the Customizer > Custom > CSS, please add the code below.

.x-header-landmark {
display: none;
}
.x-colophon.top {
display: none;
}

Hope that helps. 🙂

[Pam LParticipant]

Hello and Thanks!
I was able to use your CSS to fix the spacing issues. Beautiful!

Unfortunately, I’m still stuck on the issue with the elephant image. I tried setting the page template to Blank – No Container | Header Footer, but that resulted in all the content going right to the edges of the page.

I have removed the featured image and would like to add the elephant image in but I am really confused with the Visual Composer area of the page editing section. Do I add a “row” or an “element” first? Is there an in-depth tutorial on this?
Pam

[Pam LParticipant]

Hi again!
After a little more struggle understanding the Visual Composer I’m almost there! I didn’t understand that it was an either/or situation with Visual Composer vs Classic Editor. Now that I’ve created the content all in Visual Composer it works!

Can you tell me how to remove the white space between the header and the top image?

http://carolbradley.com/

Pam

[SupportMember]

Hello Pam,

Following line of CSS should work

.x-navbar-static-active .x-navbar .x-nav > li{height:auto;}

Thanks

[Pam LParticipant]

Hi again,
I did paste the CSS into the Customizer but I’m still seeing the white space even after clearing history.

It’s interesting that the white space disappears when I collapse the width of the window (on desktop in Firefox) and the site goes into mobile mode. (Menu turns into button.)

Any other ideas?
Pam

http://carolbradley.com/

[RubinKeymaster]

Hi There,

the reason for your whitespace is that the navigation gets pushed down due the fact that there are too many menu items / the logo is too big. Normally everything should be in one row so you will have to increase the site width or remove some menu items to make them fit then the white spacing will be gone.

[Pam LParticipant]

THANK YOU for patiently helping me through this. I have done as you suggested, reducing the logo size and making fewer menu items (by putting some items as submenus. As you promised, the white area is now eliminated!
Pam

[RubinKeymaster]

Glad everything works now Pam 🙂

[Pam LParticipant]

Yes, I’m glad too! I hate to keep bothering you guys, but I do have another question:

Now that I’ve created submenus, I notice that the submenus are quite wide. Is there an easy way to make the pull downs the same width as the top menu?

In the meantime I’ll try to look for the answer on my own.
Pam

[SupportMember]

Hi Pam,

Right now minimum width of submenu is set to 250px you can decrease that by adding following line of code to Customizer -> Custom -> CSS

Change 250px in code below to desired width.

.x-navbar .sub-menu {min-width:250px;}

Thanks

[Pam LParticipant]

Once again, thank you so much. I am so happy!

[SupportMember]

Glad you’re happy. If you have any questions, we’ll be happy to assist. 🙂

[Author]

Posts