Page title outside container when editing with VC and other bugs

[Patagonia]

Hi, I just made a test page with Visual Composer and found a few oddities:

1) The title of the page (“VC-test”)is aligned completely to the left side of the screen (in wide mode) or the left side of the box (in boxed mode), i.e. touching it (no padding and far outside the regular place it should be. See attached screenshot. On wider screens it is still on the side.

2) Also in attached screenshot: it does not matter which sidebar I put on the left side, it has some top padding, i.e. it starts lower than the rest of the row/page. I have added no custom CSS to anything. How to prevent this?

3) I noticed that the main dropdown menu (which has 3 levels, no mega) drop outside the frame. It should fold out to the left when the menu is close to the side. See screenshot

4) Not on the screenshot: The top menu (which is the same testmenu for now) only folds out to the 2nd level (even though it shows the + sign). Is that normal behaviour?

Cheers

Attachments:

You must be logged in to view attached files.

[sharmstr]

Not that this helps much, but I just tried to recreate your issue in #1 and #2. I couldn’t. I believe number 2 is happening because of #1. The sidebar should line up with the top of the content, which technically it is. Since the page title is below the title bar, its pushing your content AND the sidebar down, which is to be expected. In other words, #2 isnt really any issue.

Just for reference, I’m running BP 2.0.1, Kelo 1.4.2 and VC 4.1.2 (available in Kleo 1.4.2)

All I did to try to recreate your issue is create a new page and using VC created a textbox. If you’d like, you can post your page code here and I’ll try what you have. Switch to ‘classic mode’, switch to “text” and copy everything. Paste it back here and I’ll try it.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[sharmstr]

Edit: For what its worth, I can confirm 3 and 4 are issues.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Patagonia]

Thanks Sharmstr,

this is what I have:

COPY CODE

[vc_row inner_container="yes" text_align="center" section_type="main" bg_position="top" bg_position_horizontal="left" bg_repeat="no-repeat" bg_cover="true" bg_attachment="false" parallax_speed="0.1" padding_top="40" padding_bottom="40" min_height="0" border="bottom" css_animation="right-to-left"][vc_column width="1/4"][vc_widget_sidebar sidebar_id="sidebar-1"][kleo_button title="Text on the button" style="default" tooltip_position="left" tooltip_action="hover" icon="attention-alt"][/vc_column][vc_column width="1/2"][vc_column_text css_animation="right-to-left"]

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

[/vc_column_text][kleo_animate_numbers animation="animate-when-almost-visible" timer="14000"]7777[/kleo_animate_numbers][/vc_column][vc_column width="1/4"][kleo_animate_numbers animation="animate-when-visible" timer="1400"]7777[/kleo_animate_numbers][/vc_column][/vc_row][vc_row inner_container="no" section_type="alternate" bg_position="center" bg_position_horizontal="center" bg_repeat="no-repeat" bg_cover="false" bg_attachment="true" parallax_speed="0.2" padding_top="10" padding_bottom="10" min_height="0" border="bottom" animation="animate-when-almost-visible" css_animation="right-to-left" text_align="center" type="image" bg_image="81" enable_parallax="false"][vc_column width="1/1"][kleo_divider type="full" position="center" icon="angle-up" icon_size="large" text="inside divide text"][/vc_column][/vc_row][vc_row inner_container="yes" section_type="main" bg_position="top" bg_position_horizontal="left" bg_repeat="no-repeat" bg_cover="true" bg_attachment="false" parallax_speed="0.1" padding_top="40" padding_bottom="40" min_height="0" border="bottom" css_animation="right-to-left"][vc_column width="1/4"][kleo_icon icon="camera-alt" icon_size="4x" tooltip_position="left" tooltip_action="hover"][/vc_column][vc_column width="1/4"][vc_column_text css_animation="right-to-left"]I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.[/vc_column_text][/vc_column][vc_column width="1/4"][vc_single_image image="50" border_color="grey" img_link_target="_self" css_animation="right-to-left"][/vc_column][vc_column width="1/4"][kleo_icon icon="camera" icon_size="4x" tooltip_position="left" tooltip_action="hover"][/vc_column][/vc_row][vc_row inner_container="no" text_align="center" section_type="alternate" type="color" bg_color="#8c8c8c" bg_position="top" bg_position_horizontal="left" bg_repeat="no-repeat" bg_cover="true" bg_attachment="false" parallax_speed="0.1" padding_top="4" padding_bottom="4" min_height="0" border="all" animation="animate-when-almost-visible" css_animation="top-to-bottom"][vc_column width="1/1"][vc_message color="alert-info" style="rounded" css_animation="right-to-left"]I am message box. Click edit button to change this text.[/vc_message][/vc_column][/vc_row][vc_row inner_container="no" text_align="center" section_type="alternate" bg_position="top" bg_position_horizontal="left" bg_repeat="no-repeat" bg_cover="true" bg_attachment="false" parallax_speed="0.1" padding_top="4" padding_bottom="4" min_height="0" border="bottom" animation="animate-when-visible" css_animation="el-fade"][vc_column width="1/1"][kleo_divider type="double" double="Yes" position="center" icon="anchor"][/vc_column][/vc_row][vc_row][vc_column width="1/1"][kleo_visibility type="visible-lg"][vc_gmaps][/kleo_visibility][/vc_column][/vc_row]

(remove the < code > tags at the beginning/end).
Note that it is just a bunch of tests, but just in case it would influence the issues, I have included all the VC page code. Thanks for checking!

Cheers

[sharmstr]

First, I apologize for not understanding when you clearly said ‘left sidebar’. I’m thought you were talking about the default page sidebar, not a vc added one. Yes, there is definitely a gap. My title is in the correct location, so yours not being correct has nothing to do with that gap.

The issue is that its getting a 40px padding-top from the .sidebar css rule which is also used for the page sidebar. So basically, you’re getting what looks like a double 40px padding, but you’re not really. Its just that the top is defined from the left container instead of the content container. There’s several ways to fix this. For example

1 – Edit the widgetised sidebar.
2 – Add ‘vc_sidebar’ to the Extra class name
3 – Save
4 – Click on the <>CSS button and add

COPY CODE

.vc_sidebar { padding-top: 0; }

(or alternatively you can add it to your child style.css if you will using this on more than one page.)

Again, keep in mind that the wigetised sidebar is contained in the left content area, so you’ll still have some padding on the top compared to the main page sidebar on the right (if you have your page set up that way), but it will be top aligned with other content in that div. (hope that makes sense).

As far as your title issue goes, mine is printing in the correct location when your page code. I’ve tried it with the boxed and wide layout settings in Theme Options as well as Full-Width and Right Sidebar templates. Is this the only page where the title gets out of whack?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

Attachments:

You must be logged in to view attached files.

[Patagonia]

Thanks Sharmstr, much appreciated.

I only tried the sidebars within the page to solve the 3-columns problem which I discussed here:
https://archived.seventhqueen.com/forums/topic/how-to-use-custom-sidebars-for-3-column-pages

A solution suggested was to use a fullwidth template and add 2 sidebars.
I just tried it again on a new page, full width template and VC (now 4.1.2) added:

COPY CODE

[vc_row][vc_column width="1/4"][vc_widget_sidebar sidebar_id="sidebar-1"][/vc_column][vc_column width="1/2"][vc_column_text css_animation="right-to-left"]I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.[/vc_column_text][/vc_column][vc_column width="1/4"][vc_widget_sidebar sidebar_id="sidebar-1"][/vc_column][/vc_row]

See attached screenshot, page title still outside, both sidebars still have padding.

One added bug: the standard vertical lines/dividers are gone.

I cannot set padding global as these sidebars will also be used a regular sidebars (in 2 columns templates). I also do not want to add custom CSS to every 3-column page to get everything lined up correctly (and to have the vertical dividers?).

Attachments:

You must be logged in to view attached files.

[sharmstr]

Something non-Kleo is screwing up your titles, I think. They are fine for me on a fresh install using the code you provided me. Perhaps a plugin? Maybe that sidebar plugin?

As far as the css goes. If you’re going to be creating these two side bar pages with VC, its really not that big of deal to add vc_sidebar in the extra class box, then instead of adding custom css code to the page, add it to your child style.css. Really, the only reason I gave you the vc_sidebar suggestion is so that it doesnt screw with any other sidebar styling.

Do you have a link to the site so I can see the css being generated on that test page?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Abe]

Hi guys,

@Patagonia we know what you want to achieve and will do some tests. 3 Columns sidebar is a regular sidebar which right now can’t be changed on each page but we will think of something or fix the title alignment to the left
3. We will come with a fix for this
4. top menu is limited to 2nd level

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[Abe]

Hi, until next theme version please see the fix in this topic about the title position:
https://archived.seventhqueen.com/forums/topic/page-title-weirdness-much-pain#post-17618

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[Author]

Posts