Hope you are well. I have a few questions regarding container width and how the background/nav is affected by it. Questions are:
1) Container width is set to 1245 by default (we may change this to 1280, but question still applies), so we have set a background that can be seen on monitors/browsers when viewing greater than 1245. However once the browser size is shrunk below 1245, we would like only the content of the container to be seen (see attached). How can we achieved this?
2) How can we keep the logo and the menu icon the same width as the container (again please see same attachment for nav bar alignment)? Note we are using the off-canvas menu.
3) I have been trying to get an image in the nav bar to the left of the menu button (again please see attachment), but have been unable to target anywhere on the nav bar between the logo and the menu icon. The closest that I have got is ".col.span_9.col_last" and ".sf-menu.sf-js-enabled.sf-arrows", but I have not been able to get the full size graphic in.
-This is only partially possible if you use the Boxed Layout Option . We would suggest using the Available Theme Options rather than customizing the Theme as those changes would likely be lost if you update the Theme in the Future .
I see what you mean by partially possible using the Boxed Layout Option. The client and designer would like to see the background disappear below a certain width (I have advised of the dangers with Theme updates, but they are insisting), would you be able to point me in the direct of where this is set so I can have a look please?
Also thanks for the article - it worked to a certain extent, but I could not resize the image. Had better success with targeting .sf-menu.sf-js-enabled.sf-arrows although the image didn't behave exactly as expected..
I came to a similar conclusion after I wrote that reply to you. The only difference is that I have taken off boxed layout, used full width content and then applied max-width. I need to play around a little bit more but I think this will do the trick.
As always many thanks for your help on this awesome theme.
I'm not using a boxed layout, have applied the rows on the page to full width, and applied a max-width of 1366px. Using the following code I have managed to align the two rows (which resize as I would expect them to), BUT they are not centering on the page (please see new screenshot):
Without the above code, the top row contains a centred image sized at 1366 which resizes perfectly. However the bottom text row "steps out" (as per my previous screenshot). The code above aligns them, but really i need the lower text row to "step back in" so that both rows are aligned and centred. Given that the top row behaves like this (and that I can align them with the above code), surely the bottom row can be targeted so that it aligns with the top row? I am assuming once positioned that the JS will then come into play once the window is resized?
Sorry for bombarding you with this issue. I have resolved that problem by changing ".container.main-content {padding: 0px 90px}" to 0px. This is now centering and resizing exactly as intended - VERY happy! :)))
Also managed to adjust for smaller screen sizes so all good! Again sorry to bombard you with mail, just could not see where to target!
Hi Guys/Tahir!
Hope you are well. I have a few questions regarding container width and how the background/nav is affected by it. Questions are:
1) Container width is set to 1245 by default (we may change this to 1280, but question still applies), so we have set a background that can be seen on monitors/browsers when viewing greater than 1245. However once the browser size is shrunk below 1245, we would like only the content of the container to be seen (see attached). How can we achieved this?
2) How can we keep the logo and the menu icon the same width as the container (again please see same attachment for nav bar alignment)? Note we are using the off-canvas menu.
3) I have been trying to get an image in the nav bar to the left of the menu button (again please see attachment), but have been unable to target anywhere on the nav bar between the logo and the menu icon. The closest that I have got is ".col.span_9.col_last" and ".sf-menu.sf-js-enabled.sf-arrows", but I have not been able to get the full size graphic in.
I look forward to your answers!
Many Thanks,
Jerry
Hey Again,
-This is only partially possible if you use the Boxed Layout Option . We would suggest using the Available Theme Options rather than customizing the Theme as those changes would likely be lost if you update the Theme in the Future .
Please have a look at this Article :Add Phone-Number/Email in secondary menu with icon.
B.est
ThemeNectar Support Team
Hi Tahir,
Thanks for your response.
I see what you mean by partially possible using the Boxed Layout Option. The client and designer would like to see the background disappear below a certain width (I have advised of the dangers with Theme updates, but they are insisting), would you be able to point me in the direct of where this is set so I can have a look please?
Also thanks for the article - it worked to a certain extent, but I could not resize the image. Had better success with targeting .sf-menu.sf-js-enabled.sf-arrows although the image didn't behave exactly as expected..
Many Thanks,
Jerry
Hey Again,
If you turn on the Boxed Layout and change the Max-width of the boxed div it should be possible with additional css alone .
Thanks
ThemeNectar Support Team
Hey Tahir,
I came to a similar conclusion after I wrote that reply to you. The only difference is that I have taken off boxed layout, used full width content and then applied max-width. I need to play around a little bit more but I think this will do the trick.
As always many thanks for your help on this awesome theme.
Jerry
Hello again Tahir (sorry!),
Please see the screenshot - I have applied the following css to the text (bottom) row on the page:
.wpb_row.vc_row-fluid.vc_row.full-width-content.vc_row-o-equal-height.vc_row-flex.vc_row-o-content-top.standard_section { max-width: 1366px!important; margin: 0 auto!important; display: block!important; }
However it steps out and I cannot get the row to mimic the picture (top) row and centre itself on the page. Any ideas?
Thanks again,
Jerry
Hey Again,
The Layout is controlled via JS code so there is no way to change the width of the containers if not using the boxed layout .
Be.st
ThemeNectar Support Team
Hi Tahir,
I'm not using a boxed layout, have applied the rows on the page to full width, and applied a max-width of 1366px. Using the following code I have managed to align the two rows (which resize as I would expect them to), BUT they are not centering on the page (please see new screenshot):
.wpb_row.vc_row-fluid.vc_row.full-width-content.vc_row-o-equal-height.vc_row-flex.vc_row-o-content-top.standard_section {
max-width: 1366px!important;
margin: 0 auto!important;
}
.container.main-content .wpb_row.vc_row-fluid.vc_row.standard_section {
max-width: 1366px!important;
margin: 0 auto!important;
}
Without the above code, the top row contains a centred image sized at 1366 which resizes perfectly. However the bottom text row "steps out" (as per my previous screenshot). The code above aligns them, but really i need the lower text row to "step back in" so that both rows are aligned and centred. Given that the top row behaves like this (and that I can align them with the above code), surely the bottom row can be targeted so that it aligns with the top row? I am assuming once positioned that the JS will then come into play once the window is resized?
http://polo24hourbar.otherelements.co.uk/ethos
I look forward to your reply,
Jerry
Hi Tahir,
Sorry for bombarding you with this issue. I have resolved that problem by changing ".container.main-content {padding: 0px 90px}" to 0px. This is now centering and resizing exactly as intended - VERY happy! :)))
Also managed to adjust for smaller screen sizes so all good! Again sorry to bombard you with mail, just could not see where to target!
As always thanks for your support,
Jerry