It folds into 2 lines ’cause you narrowed the header.
About floating to left, you’re talking about the menu button with window width < 979px right?
You have this in your style.css:
.navbar .btn-navbar {
float: left;
}
.navbar .btn-navbar {flbelow oat: left;} applies in the small screen view, I guess below 940px.
My question is relating to the transition between 940 and 1170px.
Since I don’t want to reduce the logo size I reduced the other part of the header. It is not a problem for me if the menu folds, but I would like it to keep aligned to the right right.
All my efforts to find the correct css failed.
I would be grateful if you have an idea.
Here the two lines of code I found you might want to change
ul.nav#menu-menu-1{float:right;margin-right:105px} line 68 style.css
.navbar .bnt-navbar{ float:right} line 67 style.css
The margin-right will probably need to be adjust to center the menu under your button.
If you try this please remember to backup your style.css file incase something doesn’t work.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
@mrtom414, The Customizr theme comes with a setting in the dashboard to hold CSS modifications, so you don’t need to recommend editing the theme’s style.css file. There’s not really a situation where you need to recommend that anyway, you can just recommend that people download a Custom CSS plugin to make these modifications.
I’m assuming this is a child theme since the first statement says they have already modified the theme so the navigation floats right.
@andrew Nevins
The style.css mrtom414 was talking about is Manu-PB child-theme stylesheet, so no problems at all.
@manu-pb
Ok you’re talking about that transition and now that you said that I can see it 😛
@all : yes, this is in child theme, no problem
@mrtom414 : these two css lines 67 et 68 refer to reduced width < 940px, but I cannot see where the “margin-right:105px” comes from ?
@d4z_c0nf : it is strange how it behaves, isn’t it ?
@manu-pb not really, it depends on some transition effects of customizr for spans, a quick way to avoid that unwanted effect is to add this to your child-theme style.css:
.tc-header [class*=span] {
-moz-transition: none;
-webkit-transition: none;
-o-transition: none;
transition: none;
}
But you have this problem at 940px (for example before that threshold your logo is centered, after that is float left), don’t know why, where’s that media query at 940px?
I just add the 105px because of your social icon. If you didn’t the menu would line up under the social icons and not the button icon.
You might want to use a percentage because it fluid. My fix value might not be a good ideal.
The transition is now much more comfortable, thanks.
I have changed the logo for a narrow version, to avoid resizing the sapn3 / span9 classes : the menu now stays on one single line, aligned to the right.
