Docs

[venya]

Hello Themeco!
I have a couple more things I could use some help with.

1. On my home page I 2 buttons; one, (English) has action – to scroll below slider. It’s scrolling too far however, and overpasses the section title. I experimented with adding a huge padding to the section, that worked – but that doesn’t look good. How can I reduce the scroll? (see photo)

2. On same page, I’m trying to create a link a section of the homepage. I first assigned a unique ID to the section, and then tried adding it to link. Section 9 (news) for example, put #noodles into the ID field. Then for Russian button on slider I tried to link to: http://www.bennyfromtheblock.com#noodles. How do I get this to work?

3. I recently got Themeco help with getting images on my cornerstone homepage to appear in 2 columns in Mobile with code below.

@media (max-width:767px){
.page-id-3899 .x-column.x-sm.x-1-5 {
width: 46%;
float: left;
margin-right: 4%;}
}

While this did what I wanted, there’s an issue of empty space. I have 10 product images, so should be 5 rows of 2 images, however after the first 5 the second column is empty. (see photo). How can I fix this?

4. I have a cornerstone page that begins too far down in mobile view. How can I reduce the white space at the top?
http://www.bennyfromtheblock.com/publish/
I found this code in css, but changing/removing it does not change anything.

@media (max-width:797px){
.page-id-309 .entry-wrap .entry-header{
text-align:center;padding-top:45px;}
}

5. On the same page in mobile, how can I increase the width of the text a little?

6. How can I move my desktop site navbar logo upwards and to the right? (see photo)

Thank you for your help!

[venya]

This reply has been marked as private.

[Rad]

Hi there,

Thanks for posting in.

1. Your overall navbar height is 143px, but you set it to 5pxpx (which is wrong). Please go to Admin > Appearance > Customizer > Header > NAVBAR > Navbar Top Height (px) and set it to 143 (no px, it will be added automatically)

2. I don’t see any section that has noodles ID. But, the customization is similar to this https://community.theme.co/forums/topic/scroll-bottom-anchor/#post-48170

3. It’s because columns are children of a row, a row is a group. A column from another row will not gonna fill the space of another row ( there is a horizontal division ). You should use Essential Grid or The Grid for that instead of columns and rows.

4. Your top section has the padding, and that top section has the custom headline (headline has margin by default). Remove the padding on that section, then add mtn to your custom headline’s class input. It means margin-top-none.

5. Add this CSS too

@media ( max-width: 767px ) {
.x-container.width {
    width: 100%;
}
}

6. And this too,

@media (min-width: 980px) {
.x-navbar .x-brand {
position: relative;
    top: -20px;
    left: 60px;
}
}

Hope these helps 🙂

[venya]

This reply has been marked as private.

[Christopher]

Hi there,

a) Please add this :

.x-breadcrumb-wrap {
    padding: 0.05em 0;
}
body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: auto;
}

b) Please find this code and remove it :

body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: 100px !important;
}

#5 Please add this :

@media (max-width:7676px){
.x-container.max.width.offset {
    width: 100%;
}
aside.x-sidebar {
    width: 88%;
    max-width: 88%;
    margin: 0 auto;
}
}

Hope it helps.

[venya]

Hello,

Unfortunately, it did not solve the issues 🙁

a. The codes did not appear to change anything. Breadcrumb wrap is still too tall. At a width above 1667px, the breadcrumb moves upwards and to the right. I looked for any strange media queries, but did not see any that would do this… I would like to make the breadcrumb wrap just large enough to accommodate the text, and align it flush to the beginning of the sidebar. Right now, my breadcrumb is also not visible in mobile view.

b. I removed the code you suggested, but it did not keep the navbar the same height. It still gets taller as you scroll down the page. That code was placed last week to stop issue that when scrolling down, the top of the page would jump down a few lines…

Thank you.

[Christopher]

Hey there,

Thanks for writing in! This particular situation is simply a matter of reworking your content to properly fit the physical limitations presented by the theme (this is a consideration that must be taken into account with all themes and designs). It is the same principal applied to filling up a room with furniture—there is only so much that can fit into a given space. The following should be considered in these situations:

• Logo Size – longer logos will conflict with navigation items as you size your site down. If you are noticing a conflict, you may need to implement some CSS to size down your logo as viewports get smaller.
• Shorter Names – you should always shoot to have your top-level navigation links be as simple as possible. For example, if your link is “Learn About My Company,” Try using “About” instead. It conveys the same idea and will save you a ton of real estate.
• Rearrange – sometimes we want to put all of our links in the top-level navigation, but not all pages are created equally. Pages of lesser importance that pertain to a parent link might work well as a sub-menu instead.
• Less Links – even on more “complex” websites with lots of pages, there are always ways to combine information together to make things simpler, which also ensures that your user doesn’t have to click around for every granular piece of information. For example, you might have two top-level links called “About” and “Contact,” which could possibly be combined into one. This eliminates the need for extra links and makes things much simpler for your users to navigate. Less is more in information architecture.
• Appearance – fortunately X features plenty of options for adjusting the appearance of elements throughout your site, and the navbar is one of the more flexible elements. Try using a smaller font size if possible to save on a little real estate.

You need to remove following code as well :

body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: 100px !important;
}
body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: 100px;
}
@media (min-width: 979px){
.x-navbar .x-navbar-inner {
    height: 100px!important;
}
.x-navbar-inner {
    min-height: 100px;
}

}

After following this replay, the result would be like attachment.

Thanks!

[Author]

Posts