[Komodo85Participant]

Hello

Love your theme, but I’m finding a few customizations hard to make. I have all the latest versions.

http://testserver5.komodo.no/

1. I want to change the default margin between columns, all columns in all column layouts, to 10px, for the whole site.

2. Setting opacity within a column makes the background colour disappear completely. The first two red boxes are without opacity, the other 6 have opacity: 0.95.

3. I want the menu bar to be on top of the image, not in it’s own “section”. Not sure if this is beyond your support scope, but I think having options for menu transparency without the option of having it on top of an image kind of defeats the purpose.

Looking forward to your response.

Regards,
Thomas

[Komodo85Participant]

4. None of the background colours for columns seems to work, why is this?

[Komodo85Participant]

Back to 1: I set the margin to 5px for each columnm which kind of worked, but now the entire row is shifted to the left, when I want it to take up the full content width of 1200px.

[Komodo85Participant]

4: Update

Yeah, the column didn’t like me putting in “margin: 5px 5px 5px 0px”. That was what removed the background colour.

Sorry for all the too quick updates here. Anyway. The opacity is still an issue. Please advise.

Best,
T

[FriechModerator]

Hi There,

Thanks for writing in! First please navigate to your custom CSS and remove the extra bracket

#1 For the column margin, we advice that you use a percentage value instead of px for responsive purposes.

@media (min-width: 980px) {
	.home .x-column {margin-right: 1%;}
	.home .x-column.last, .home .x-column:last-of-type {margin-right: 0;}
}

#4 If you’re doing an inline CSS rule like margin: 5px 5px 5px 0px, please put a semicolon at the end margin: 5px 5px 5px 0px;

#2 It is how opacity works. It makes a section transparent and its content. Maybe provide us a clarification of what you’re wanting to do here, so we could have a better idea.

#3 You can combine this with #1

@media (min-width: 980px) {
	.home div#x-section-1 {margin-top: -100px !important;}
}

You can make the navbar transparent on the Customizer.

Hope it helps, Cheers!

[Komodo85Participant]

Thanks guys!

1: Works great 🙂 A related issue: How can I remove the default white-space underneath images (image element)?

2: Yes, I know, but here it removes the whole background. A bug? Screenshot: http://prnt.sc/aba2ay

3: Cool. Works well. To push it a step further (rail me in if I go too far!), is there a way to make the menu turn “solid” when it passes a certain point? Like this other site, here: http://mirru.no/

Awesome support guys. Keep it up and we’ll all be comin’ back for more (themes I mean, not support 😉 ).

T

[Rue NelModerator]

Hello Again,

1] To remove the white space underneath the image element, please select the image and add a custom class mbn which means “margin bottom none”. This is a element spacing utility class helper. You can check out more about these classes here: https://community.theme.co/kb/css-class-index/

2] Please know that opacity applies to the element being attached to and all other elements inside the element. If you want to have an opaque background color, please use rgba in your background instead. In your case, perhaps adding an inline css to your column background-color:#ab2328; background-color: rgba(171, 35, 40, 0.25);. Please see the screenshot to have a clear idea how it will look like.

http://www.w3schools.com/cssref/css_colors_legal.asp

3] To turn the solid color in your navbar as soon as you get pass the first section, please edit your page in Cornerstone, go to the settings tab, Settings > Custom JS and insert the following custom js code

(function($){
    $(document).ready(function($) {

	    var windowObj            = $(window);
	    var body                 = $('body');
	    var bodyOffsetBottom     = windowObj.scrollBottom();             // 1

	    var section      		 = $('#x-section-1').height();
	    var navbar      		 = $('.x-navbar');

	    function sizingUpdate(){
	      var bodyOffsetTop = windowObj.scrollTop();
	      if ( bodyOffsetTop > section ) {
	        navbar.addClass('colored');
	      } else {
	        navbar.removeClass('colored');
	      }
	    }

	    windowObj.bind('scroll', sizingUpdate).resize(sizingUpdate);
	    sizingUpdate();

	});
})(jQuery);

And then you need to insert the following custom css in the settings tab, Settings > Custom CSS

.x-navbar.colored {
  background-color: rgba(0,0,0,0.75);
}

http://prntscr.com/abeiok
http://prntscr.com/abeit9

And if ever you want to remove the lines in your navbar, simply use this code in your customizer, Appearance > Customize > Custom > CSS

.x-navbar-fixed-top-active .x-navbar-wrap,
.x-navbar {
  border: none;
  box-shadow: none;
  margin: 0 auto;
}

We would loved to know if this has work for you. Thank you.

[Komodo85Participant]

You guys rock the netz.

1) Awesome. Didn’t know about the utility classes.

2) Thanks for clarifying that. rgba did the job.

3) Wunderbar! It works, but needs a little adjustment. The colour changes right after scrolling, not after the first section.
Thanks for the code to remove white lines. I used it to remove the annoying line above the menu.

All the best,
Thomas

[Komodo85Participant]

4) Another thing, all changes to the menu seems to disappear as soon as it breaks down to mobile menu with icon. Any way to include the mobile menu in all this?

[Komodo85Participant]

3) Sorry, now it seems to work fine. Not sure why it behaved differently before, perhaps cache-related. Anyways, it works great, so thanks.

[ChristopherModerator]

Hi there,

Fixed menu is disabled by default for mobile navigation, however if you want fixed menu, please add this :

@media (max-width: 979px){
.x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
    position: fixed;
}
}

Add following code as well :

.x-navbar.x-navbar-fixed-top {
    border: none;
}

Hope it helps.

[Komodo85Participant]

Hmm, yes, ok, but the changes I made due to your helpful suggestions earlier in this thread. The transparency etc, they all disappear on mobile. I would like all changes applied to the normal menu to also apply to the mobile menu.

R,
T

[Komodo85Participant]

Also, this code for changing default margins between elements, it doesn’t remove the right side margin for the red boxes on this page: http://testserver5.komodo.no/contact/

@media (min-width: 980px) {
.x-column {margin-right: 1%;}
.x-column.last, .x-column:last-of-type {margin-right: 0;}
}

Any idea why?

[Rue NelModerator]

Hello Again,

The transparency etc, they all disappear on mobile.
The one displaying on mobile is coming from a different section because those that comes from the first section, you hid it by setting the visibility options so that it will not display on smaller screen sizes (http://prntscr.com/abq4na). Please edit your page and make sure that you have displayed those rows in all screen sizes.

Also, this code for changing default margins between elements, it doesn’t remove the right side margin for the red
This code changes the margin right of the column but still you haven’t change the width. You also need to change the widths of the columns because the total width together with the right margin of the column should always be 100%. Take this code for example:

@media (min-width: 980px) {
  .x-column.x-1-2 {width: 49.5%;}
  .x-column.x-1-3 {width: 33%;}
  .x-column.x-1-4 {width: 24.75%;}
  .x-column.x-1-5 {width: 19.8%;}
  .x-column {margin-right: 1%;}
  .x-column.last, .x-column:last-of-type {margin-right: 0;}
}

The simple explanation is like this:
1/2 column + margin right + 1/2 column = 100%
49.5% + 1% + 49.5 = 100%

If you exceed 100%, one column will go down and will no longer be inline with all the other columns in the row. If you have less than 100%, you do not occupy the fullwidth row.

Hope this explains it briefly.

[Komodo85Participant]

Hello, thanks for the code snippet!

We misunderstand each other on the transparency. I mean the changes we did in the navbar, not the elements (red boxes) underneath. My question is how do I make the mobile navbar behave and look exactly like the normal navbar – without the menu names obviously, I’m only referring to the styling.

R,
T

[Author]

Posts