PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Mon May 22, 2017 4:24 pm

All times are UTC - 5 hours




Post new topic Reply to topic  [ 9 posts ] 
Author Message
PostPosted: Thu Feb 23, 2017 4:52 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4196
Location: United Kingdom
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.


Top
 Profile  
 
PostPosted: Thu Feb 23, 2017 6:39 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6243
Location: Montreal, Canada
Do you mean something like this? http://imgur.com/a/CLrFv

_________________
Supported PHP versions No longer supported versions


Top
 Profile  
 
PostPosted: Thu Feb 23, 2017 7:05 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4196
Location: United Kingdom
Genius. How did you do that??? :)

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
PostPosted: Thu Feb 23, 2017 7:14 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6243
Location: Montreal, Canada
Syntax: [ Download ] [ Hide ]
.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.

_________________
Supported PHP versions No longer supported versions


Top
 Profile  
 
PostPosted: Thu Feb 23, 2017 7:28 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4196
Location: United Kingdom
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.


Top
 Profile  
 
PostPosted: Thu Feb 23, 2017 7:51 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6243
Location: Montreal, Canada
You could try positioning the nav -50% left and the ul 50% left.

_________________
Supported PHP versions No longer supported versions


Top
 Profile  
 
PostPosted: Thu Feb 23, 2017 7:53 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4196
Location: United Kingdom
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.


Top
 Profile  
 
PostPosted: Thu Feb 23, 2017 7:56 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6243
Location: Montreal, Canada
Syntax: [ Download ] [ Hide ]
.main-navigation {
  float: right;
  position: relative;
  left: -50%;
}

.main-navigation ul {
  position: relative;
  left: 50%;
}

_________________
Supported PHP versions No longer supported versions


Top
 Profile  
 
PostPosted: Thu Feb 23, 2017 7:57 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4196
Location: United Kingdom
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.


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 9 posts ] 

All times are UTC - 5 hours


Who is online

Users browsing this forum: No registered users and 4 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group