I am trying to find a setting which I am sure I saw before which was to set an offset for the sticky navigation so that the content on my pages is not covered by the navigation when on narrow devices like phones and tablets.

The attached image can show how the top of my site is being covered by the sticky navigation once the menu is replaced with the offset menu.

Thanks for any pointers in the right direction. I am using Colourshift2 theme with Build.r

Hi Sean,

At the moment there isn't an offset on any of the buildr templates as far as I'm aware

I will check in the morning with Rob on this one

Cheers
Paul

Paul interestingly enough not all of my pages are having this problem. For example the pages that just display a breadcrumb trail below the menu, logo and search icon look very nice when the window is made narrow:

Good:
drcarney.cloudaccess.host/articles/entry/how-to-eat-a-balanced-wfpb-diet

But, my pages that have something in the Grid positions or the sidebar positions without a breadcrumb trail do not look good. Not sure why but it may be the lack of the breadcrumb. Interestingly maybe that is just the homepage now. But, It may happen to the other pages when I start adding some modules into the grid positions.

Not Good:
drcarney.cloudaccess.host/

Hi Sean,

A bit late here now but will look in the morning

Cheers
Paul

Thanks Paul,

I think I will actually put in a ticket about this because I believe it is something that will need to be fixed in the template.

Sean

Hi Sean,

It may be something we look at - there may be css tweaks possible but adding a feature does involve a lot of work

Cheers
Paul

Actually in my mind this would be fixing a bug and not adding a feature. I did not put in the ticket yet.

Thanks, Sean

Hi Sean,

I think there is a reason we didn't add this feature but can't quite remember why

I will ask paulo about this but I don't think we can add an update to buildr at the moment as we are very behind with template releases

It may be Monday before I speak to him

Cheers
Paul

With the good and the bad

Is the bad just on the home page?

Cheers
Paul

I better give you some pictures for this one. You keep mentioning this 'feature' but I don't see a feature. I just see that my template is broken for mobile phone users and so needs to be fixed.

The problem is that the ZenTools2 or other modules on the homepage are loading behind the navigation bar/logo/search icon and so the titles of the modules are getting cut off or part of the module is getting cut off at the top.

I agree there probably does not need to be an offset. I just thought that maybe an offset would fix the problem.

Hi Sean,

With the good and the bad pages

Is the bad just on the home page?

I think that is right. I believe it is only the home page. But, that is because the home page is the only page where I am assigning modules yet into the various grid positions.

In order for you to see this just added a module into the Grid5 position on the page at drcarney.cloudaccess.host/acts and now the same thing is happening there.

Thanks, Sean

This is what is getting hidden the first time. But, each subsequent time it is getting pushed down. So, the spacing is NOT even:

<h3 class="zen-module-title title zen-center zen-line zen-icon zen-icon-thumbs-o-up"><span>Articles</span></h3>

If you go to my page at drcarney.cloudaccess.host/

Then narrow the browser to behave like a mobile phone

Then scroll down and look at the layout of all the titles with the zen-icon and the line class.

You will notice they are are not all the same (padding above and below is different)

Thanks for hanging in there with me on this one.

hmm right

Looks like something is awry with the js

I will try and talk to Rob over the weekend or definitely Monday so he can take a look

Thanks for seeing it. Once this small items is taken care of then all I have is an issue with the menus, which Rob is aware of whereby the menus to the right of my page are displaying their sub menus off of the screen. After that I will be able to recreate all my design work onto my real site. That will be a happy day!

PS. To see that menu issue you can go to drcarney.cloudaccess.host/

Then roll your mouse over the Shop menu to see that the submenu items don't display because they are hidden off the page on the right somewhere.

Sean

Hi Sean,

The issue here is with the position the mobile elements are added to.

The normal menu is statically positioned until you scroll the page, when it then becomes fixed.
When it becomes fixed, another element (stickyfill) expands to the height of the menu to push the rest of the content on the page down, since the fixed positioning takes the menu out of the normal document flow.

You have the mobile elements in the toolbar row, which is a fixed position by default.
So even before scrolling, the toolbar sits on top of the other content since it is out of the document flow.
After scrolling, the stickyfill element still expands and then pushes the content down again.

So, you could either move the mobile elements to a different row that isn't fixed, or you can make the toolbar statically positioned by default, and let the fixed positioning take over when you scroll the page.

Try adding the following to your custom.css file:

Thank you Rob,

I believe mine is set up the same as the Quickstart. I have a quickstart installed at look.freesite.host and it looks the same. Basically in the toolbar row there are three positions: Off-canvas-trigger-mobile, Mobile-log and Top1.

I will try the css you provided and see what happens.

Rob,

That did work.

I have some issues with the padding above the titles for the first two rows that I am trying to solve. Here are isues:

This section appears to have 30 pixels above and below it:

<section id="grid2wrap" class="zen-row-wrap clearfix no-change-tablets stack-phones fadeIn zen-animate row-padding-vert row-margin-none container-padding-none container-margin-none">

This section appears to not have padding:

<section id="grid3wrap" class="zen-row-wrap clearfix no-change-tablets stack-phones">

I would like to control the padding for both sections so that I could try to get them to even out the distance between the bottom of each module and the title of the next module when they are stacked on mobile views.

Currently if you look at this on a mobile device the four modules are not uniformly spaced.

Can you tell me where I can adjust these top and bottom margins?

Thanks, Sean

Hi Sean,

You can adjust that in the settings for each row in the template admin.

Click on the edit icon in the top right of each row and you get the options in the right panel.

Click on the layout tab and there are options for padding for the row and the container.

Reards,

Rob