Radiate Pro: How could I use CSS to centre the logo and menu
Moderator: General Moderators
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Radiate Pro: How could I use CSS to centre the logo and menu
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.
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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: Radiate Pro: How could I use CSS to centre the logo and
Do you mean something like this? http://imgur.com/a/CLrFv
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: Radiate Pro: How could I use CSS to centre the logo and
Genius. How did you do that??? 
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: Radiate Pro: How could I use CSS to centre the logo and
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;
}-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: Radiate Pro: How could I use CSS to centre the logo and
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??
Can the whole UL container be center aligned??
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: Radiate Pro: How could I use CSS to centre the logo and
You could try positioning the nav -50% left and the ul 50% left.
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: Radiate Pro: How could I use CSS to centre the logo and
Sorry how? I did try margin-left 50% but it did as I expected... crush it! lol.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: Radiate Pro: How could I use CSS to centre the logo and
Code: Select all
.main-navigation {
float: right;
position: relative;
left: -50%;
}
.main-navigation ul {
position: relative;
left: 50%;
}-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: Radiate Pro: How could I use CSS to centre the logo and
You BEAUTY! Wow brilliant. And doesn't seem to alter the mobile if I put it in a media with of min-width 768. 
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.