thanx again for a great theme... I collected some questions while I was
working on my project and I am going to ask them here in a bundle in
the hope that this makes it somewhat easier...
I want the full width background images
to always be static (like here: http://dynamicboost.de/neu/) and not
to be scrolling if the content is bigger than one page (like here:
http://dynamicboost.de/kontakt/#impressum). How can this be achieved?
I believe that this should be an easy background-attachment: fixed;
solution, but I can't make it work.
How can I force the normal browser
scrollbar? The setting does not seem to work. Or change the colour of
the smaller one used in the theme?
I want some link icons to be white, but
changing to red on hover (without a circular border around),
preferably also with a tiny zoom in? How could this be done?
How can I change the colour of hovered
and active links in the main menu on top?
Is there a way to make a coloum
background image also react to the margin of the coloum, and so
making the whole coloum smaller with a larger margin around it? It
seems only the content is affected by it. Or: How can there be a
larger distance between two coloumns with background images?
For mobile only: Is it possible to
change the color of the three stripes to open the off canvas menu? I
want them to be red, rather than white on white. Per default they seem to correspond with the bright or dark setting of the page, but I need it to be independent.
Thank you very much in advance for your time and effort!
Unfortunately using background-attachment fixed affects the page functionality. Hence it isn't possible for kontakt page.
To change the color of the scroll bar you can use the following Custom CSS on the page settings.
.iScrollVerticalScrollbar.iScrollLoneScrollbar .iScrollIndicator{ background-color: red !important; }
To set icon hover color use the following CSS. Please ensure you set the icon type to "Icon Only" and color white. The zoom is the transform and you can change scale value.
To change header fonts you can go to Header Navigation > Logo & General Styling > Header Color Scheme and set to Custom. You can then set the hover color.
Any change in margin or padding will also affect the page content. Are you try to affect the margins between the areas on the "kontakt" page while you scroll. If that is the case the best option would be to set column padding or margin for top and bottom for example even if it affects page content.
To change the color of the stripes toggle on mobile. You can use the following. Otherwise if off canvas is enabled by using the "Header Color Scheme" options.
@media (max-width: 1000px){ .slide-out-widget-area-toggle[data-icon-animation="simple-transform"].mobile-icon .lines{ background-color: red !important; } }
That the background can't be fixed really is a pity, as it just looks horrible the moment you are scrolling content. Maybe something to implement in the future?
The changing of the scrollbar color works perfectly. Thanks. However, the other hints are not working unfortunately.
The icon hover code does have no effect. Neither a color change on hover, nor the zoom.
I already had set a custom color setting for the header. It did not effect the font in any way. Also the normal header font is set to be white, but appears as light grey and it doesn't change color on hover. Maybe has all of this to do with starting off from a demo, so there are underlying settings that overrule any changed settings?
The margin question does not refer to kontakt, but rather here: http://dynamicboost.de/portfolio/ I want four of those coloums in one row, but put more distance in between them. I was thinking I could attach margin to each coloumn, but then the background image does not follow the margin. It stays the same size, while the content is influenced by the margin. However, I am just looking for a way to create a larger distance between whole coloumns.
The code for the stripes in off canvas works differenty then I wanted. On mobile I want a white background on top of the page, but the three strips to open the off canvas menu to be red. At the moment its white on white, so not vissible. The rest I want to stay the same... red background of the off canvas menu, white font.
If you have other thoughts how to achieve those things please do let me know. Thank you very much and have good day.
Can you let me know the page you would like to change the Icon on. The initial changes should be using only icon type "Icon Only" and color to white. Then apply the hover effect to make it zoom and change color.
The header color has a bit of opacity on it so the white seems a bit gray. Is the current header animation effects "Header Link Hover/Active Effect" set to color change? That needs to be the selection so the color change occurs.
If the aim of changing the margins of the portfolio page is to increase visibility the best option maybe to add a simple border to the fancy boxes. To have the four items in a row changing the margin while result in that changing to 3 for example.
Seems the CSS was incomplete to fully change the color of the header mobile toggle. Please try the following.
@media (max-width: 1000px){
header#top .span_9 > .slide-out-widget-area-toggle i,
header#top nav ul .slide-out-widget-area-toggle a i.lines,
header#top nav ul .slide-out-widget-area-toggle a i.lines:after,
header#top nav ul .slide-out-widget-area-toggle a i.lines:before,
.slide-out-widget-area-toggle.mobile-icon .lines-button.x2 .lines:before,
.slide-out-widget-area-toggle.mobile-icon .lines-button.x2 .lines:after,
.slide-out-widget-area-toggle[data-icon-animation="simple-transform"].mobile-icon .lines-button:after,
header#top .slide-out-widget-area-toggle[data-icon-animation="spin-and-transform"].mobile-icon .lines-button.x2 .lines{
background-color: red !important;
}
}
the header colors are working now. I switched off the transparent header settings.
For the icon there is an example here: http://dynamicboost.de/das-spiel-ist-aus-test-2/ In the last section of that page are three white icons as a kind of portfolio links. For those I want to change color and zoom on hover.
Yes, I can put a margin on the fancy boxes, or a border on the coloumn. However, this doesnt change the size of the background image. I am using a background image for the coloum, so I can make the text of the fancy box transparent to start with. This is the css code for that:
So I am looking for a way to make the coloum as a whole smaller or actually just more further apart of each other. But I might also think too complicated here.
On my mobile the three stripes are now black, which obviously is better than white on white (which also works without the additional css code). However, still there only appears some red in the middle line of the cross once the off canvas menu is open. It would be great to have the three stripes red from the beginning.
It seems the Custom CSS is failing to override the CSS from theme, hence settings would need to be added by the developer to allow the stripes to change color.
Hey,
thanx again for a great theme... I collected some questions while I was working on my project and I am going to ask them here in a bundle in the hope that this makes it somewhat easier...
I want the full width background images to always be static (like here: http://dynamicboost.de/neu/) and not to be scrolling if the content is bigger than one page (like here: http://dynamicboost.de/kontakt/#impressum). How can this be achieved? I believe that this should be an easy background-attachment: fixed; solution, but I can't make it work.
How can I force the normal browser scrollbar? The setting does not seem to work. Or change the colour of the smaller one used in the theme?
I want some link icons to be white, but changing to red on hover (without a circular border around), preferably also with a tiny zoom in? How could this be done?
How can I change the colour of hovered and active links in the main menu on top?
Is there a way to make a coloum background image also react to the margin of the coloum, and so making the whole coloum smaller with a larger margin around it? It seems only the content is affected by it. Or: How can there be a larger distance between two coloumns with background images?
For mobile only: Is it possible to change the color of the three stripes to open the off canvas menu? I want them to be red, rather than white on white. Per default they seem to correspond with the bright or dark setting of the page, but I need it to be independent.
Thank you very much in advance for your time and effort!
Hi,
Thank you for contacting us.
Unfortunately using background-attachment fixed affects the page functionality. Hence it isn't possible for kontakt page.
To change the color of the scroll bar you can use the following Custom CSS on the page settings.
.iScrollVerticalScrollbar.iScrollLoneScrollbar .iScrollIndicator{
background-color: red !important;
}
To set icon hover color use the following CSS. Please ensure you set the icon type to "Icon Only" and color white. The zoom is the transform and you can change scale value.
body .nectar_icon_wrap i:hover{
color: #ff0000 !important;
transition: transform .2s; /* Animation */
transform: scale(1.1); /* Zoom */
}
To change header fonts you can go to Header Navigation > Logo & General Styling > Header Color Scheme and set to Custom. You can then set the hover color.
Any change in margin or padding will also affect the page content. Are you try to affect the margins between the areas on the "kontakt" page while you scroll. If that is the case the best option would be to set column padding or margin for top and bottom for example even if it affects page content.
To change the color of the stripes toggle on mobile. You can use the following. Otherwise if off canvas is enabled by using the "Header Color Scheme" options.
@media (max-width: 1000px){
.slide-out-widget-area-toggle[data-icon-animation="simple-transform"].mobile-icon .lines{
background-color: red !important;
}
}
Kind Regards
Hey Andrew,
thank you for the comprehensive reply.
That the background can't be fixed really is a pity, as it just looks horrible the moment you are scrolling content. Maybe something to implement in the future?
The changing of the scrollbar color works perfectly. Thanks. However, the other hints are not working unfortunately.
The icon hover code does have no effect. Neither a color change on hover, nor the zoom.
I already had set a custom color setting for the header. It did not effect the font in any way. Also the normal header font is set to be white, but appears as light grey and it doesn't change color on hover. Maybe has all of this to do with starting off from a demo, so there are underlying settings that overrule any changed settings?
The margin question does not refer to kontakt, but rather here: http://dynamicboost.de/portfolio/ I want four of those coloums in one row, but put more distance in between them. I was thinking I could attach margin to each coloumn, but then the background image does not follow the margin. It stays the same size, while the content is influenced by the margin. However, I am just looking for a way to create a larger distance between whole coloumns.
The code for the stripes in off canvas works differenty then I wanted. On mobile I want a white background on top of the page, but the three strips to open the off canvas menu to be red. At the moment its white on white, so not vissible. The rest I want to stay the same... red background of the off canvas menu, white font.
If you have other thoughts how to achieve those things please do let me know. Thank you very much and have good day.
Hi,
Can you let me know the page you would like to change the Icon on. The initial changes should be using only icon type "Icon Only" and color to white. Then apply the hover effect to make it zoom and change color.
The header color has a bit of opacity on it so the white seems a bit gray. Is the current header animation effects "Header Link Hover/Active Effect" set to color change? That needs to be the selection so the color change occurs.
If the aim of changing the margins of the portfolio page is to increase visibility the best option maybe to add a simple border to the fancy boxes. To have the four items in a row changing the margin while result in that changing to 3 for example.
Seems the CSS was incomplete to fully change the color of the header mobile toggle. Please try the following.
@media (max-width: 1000px){ header#top .span_9 > .slide-out-widget-area-toggle i, header#top nav ul .slide-out-widget-area-toggle a i.lines, header#top nav ul .slide-out-widget-area-toggle a i.lines:after, header#top nav ul .slide-out-widget-area-toggle a i.lines:before, .slide-out-widget-area-toggle.mobile-icon .lines-button.x2 .lines:before, .slide-out-widget-area-toggle.mobile-icon .lines-button.x2 .lines:after, .slide-out-widget-area-toggle[data-icon-animation="simple-transform"].mobile-icon .lines-button:after, header#top .slide-out-widget-area-toggle[data-icon-animation="spin-and-transform"].mobile-icon .lines-button.x2 .lines{ background-color: red !important; } }Kind Regards
Hey again,
the header colors are working now. I switched off the transparent header settings.
For the icon there is an example here: http://dynamicboost.de/das-spiel-ist-aus-test-2/ In the last section of that page are three white icons as a kind of portfolio links. For those I want to change color and zoom on hover.
Yes, I can put a margin on the fancy boxes, or a border on the coloumn. However, this doesnt change the size of the background image. I am using a background image for the coloum, so I can make the text of the fancy box transparent to start with. This is the css code for that:
.nectar-fancy-box .inner {opacity: 0;}
.nectar-fancy-box:hover .inner {opacity: 0.9;}
So I am looking for a way to make the coloum as a whole smaller or actually just more further apart of each other. But I might also think too complicated here.
On my mobile the three stripes are now black, which obviously is better than white on white (which also works without the additional css code). However, still there only appears some red in the middle line of the cross once the off canvas menu is open. It would be great to have the three stripes red from the beginning.
Best regards.Hi,
For the icon you can try the following CSS.
.nectar_icon:hover i:before{ color: #ff0000 !important; } .nectar_icon:hover i{ transition: transform .2s; /* Animation */ transform: scale(1.2); /* Zoom */ }To make the columns smaller you can try the following CSS on the page settings, which changes the width of the container and also the margin left.
@media (min-width: 690px){ .vc_col-sm-3:not(first-child){ margin-left: 8% !important; } } @media (min-width: 1000px){ body .vc_row-fluid .vc_col-sm-3 { width: 17% !important; } }It seems the Custom CSS is failing to override the CSS from theme, hence settings would need to be added by the developer to allow the stripes to change color.
Kind Regards
Thank you very much, Andrew. Both are working perfectly!!!
Hi,
You're welcome.
Regards
Themenectar Support Team