Page 1 of 1
Radiate Pro: How could I use CSS to centre the logo and menu
Posted: Thu Feb 23, 2017 3:52 am
by simonmlewis
https://demo.themegrill.com/radiate-pro/
We are using this theme, but we want to center align the logo (so it's central and above the menu), and center the menu so the margins left and right of their container are even.
I cannot see how to achieve this. It might affect mobile, but the mobile is on it's own Toggle, so maybe not.
Re: Radiate Pro: How could I use CSS to centre the logo and
Posted: Thu Feb 23, 2017 5:39 am
by Celauran
Do you mean something like this?
http://imgur.com/a/CLrFv
Re: Radiate Pro: How could I use CSS to centre the logo and
Posted: Thu Feb 23, 2017 6:05 am
by simonmlewis
Genius. How did you do that???

Re: Radiate Pro: How could I use CSS to centre the logo and
Posted: Thu Feb 23, 2017 6:14 am
by Celauran
Code: Select all
.site-branding {
text-align: center;
/** Remove **/
margin-right: 30px;
float: left;
}
.radiate-hdt-2 #header-logo-image {
/** Remove **/
float: left;
}
.radiate-hdt-2 #header-logo-image img {
margin: 0 auto;
}
.radiate-hdt-2 #header-text {
/** Remove **/
float: left;
}
.main-navigation {
/** Remove **/
float: right;
}
.main-navigation ul {
display: flex;
}
.main-navigation li {
flex: 1;
text-align: center;
}
Tried to keep it straightforward. These are all existing selectors. Stuff below the /** Remove **/ line gets removed, the rest gets added. You may also want to bump down the slider some to allow for the new height of the nav section.
Re: Radiate Pro: How could I use CSS to centre the logo and
Posted: Thu Feb 23, 2017 6:28 am
by simonmlewis
Only problem with that, is the flex. It's flexing them all to be the same width, so if I bring it in to smaller tablet view, like 800px, multiple words wrap.
Can the whole UL container be center aligned??
Re: Radiate Pro: How could I use CSS to centre the logo and
Posted: Thu Feb 23, 2017 6:51 am
by Celauran
You could try positioning the nav -50% left and the ul 50% left.
Re: Radiate Pro: How could I use CSS to centre the logo and
Posted: Thu Feb 23, 2017 6:53 am
by simonmlewis
Sorry how? I did try margin-left 50% but it did as I expected... crush it! lol.
Re: Radiate Pro: How could I use CSS to centre the logo and
Posted: Thu Feb 23, 2017 6:56 am
by Celauran
Code: Select all
.main-navigation {
float: right;
position: relative;
left: -50%;
}
.main-navigation ul {
position: relative;
left: 50%;
}
Re: Radiate Pro: How could I use CSS to centre the logo and
Posted: Thu Feb 23, 2017 6:57 am
by simonmlewis
You BEAUTY! Wow brilliant. And doesn't seem to alter the mobile if I put it in a media with of min-width 768.
