Radiate Pro: How could I use CSS to centre the logo and menu

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
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

Post 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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Radiate Pro: How could I use CSS to centre the logo and

Post by Celauran »

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

Post by simonmlewis »

Genius. How did you do that??? :)
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Radiate Pro: How could I use CSS to centre the logo and

Post 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.
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

Post 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??
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Radiate Pro: How could I use CSS to centre the logo and

Post by Celauran »

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

Post by simonmlewis »

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.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Radiate Pro: How could I use CSS to centre the logo and

Post by Celauran »

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

Post 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. :)
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Post Reply