Move logo in middle of Menu Manager

[ilovekiwi]

Hey there!
I was wondering how could I move my website logo so it sits in the middle of the menu manager.

Also, how would I make my margin-top of the navbar transparent? 

Thanks for all the help in advance.

The picture below explains what I kinda want. Also, the margin-top I would like to be transparent for all the buttons, not for only the one I showed.

EDIT : One more thing, how could I remove the bottom breadcrumb? Thanks.

Edited July 9, 2018 by ilovekiwi

[ilovekiwi]

Sorry for being late.
I will first post my issues, to be clear.

1. Move my logo in the middle of the Menu
2. Move the header/navbar a little bit down
3. Remove the bottom breadcrumb

# FIRST ISSUE #

Being helped a little bit by Davlin, ( thank you! ) he gave me a tip, to remove the menu made by the IPS Menu Manager. So I did that and made my new menu. This is the code ( I removed all links so I wouldn't advertise or anything. You can replace it by yourself if you ever need this code. ). I went to AdminCP -> Appearance -> Themes -> Edit HTML & CSS -> Templates : NavBar and removed the code of the Menu Manager and added mine.

Spoiler

            <ul data-role="primaryNavBar">
        <li id="elNavSecondary_34" data-role="navBarItem" data-navapp="core" data-navext="CustomItem">
                <a href="#" data-navitem-id="34">
                    HOME
                </a>    
        </li>
        <li id="elNavSecondary_69" data-role="navBarItem" data-navapp="core" data-navext="CustomItem">
                <a href="#" data-navitem-id="34">
                    CHARACTER
                </a>
        </li>        
        <li id="elNavSecondary_35" data-role="navBarItem" data-navapp="core" data-navext="CustomItem">
                <a href="#" data-navitem-id="35">
                    STORE
                </a>    
        </li>    
        <li id="elNavSecondary_37" data-role="navBarItem" data-navapp="core" data-navext="CustomItem">        
                <a href="#" data-navitem-id="37">
                    SERVERS
                </a>    
        </li>
        <li id="elNavSecondary_100" data-role="navBarItem" data-navapp="core" data-navext="CustomItem" class="logo">
            <a href="#" class="logo" accesskey="1"><img src="#uploads/monthly_2018_07/xd.png.167d447d653752cb7f9d34fbe5039d68.png" alt="#Network"></a></li>    
        <li id="elNavSecondary_36" data-role="navBarItem" data-navapp="core" data-navext="CustomItem">
                <a href="#" data-navitem-id="36">
                    RULES
                </a>
        </li>    
        <li id="elNavSecondary_40" data-role="navBarItem" data-navapp="core" data-navext="CustomItem">
                <a href="#" data-navitem-id="40">
                    STAFF
                </a>        
        </li>
        <li id="elNavSecondary_40" data-role="navBarItem" data-navapp="core" data-navext="CustomItem">    
                <a href="#" data-navitem-id="40">
                    NEWS
                </a>        
        </li>    
        <li id="elNavSecondary_39" data-role="navBarItem" data-navapp="core" data-navext="CustomItem">
                <a href="#" data-navitem-id="39">
                    CHANGELOG
                </a>    
        </li>
    

 

# SECOND ISSUE #

Now my second issue was pretty easy to fix. Go into the AdminCP -> Appearance -> Themes -> Edit HTML & CSS -> CSS -> Search for .ipsApp #header ( I found mine into the _ipsfocus_theme.css ).

After you find this, your code should look something like this.

.ipsApp #header{
	background: {hextorgb="header" opacity="0.9"};
	box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.15), 0px 1px 0px rgba(0, 0, 0, 0.1);

Now just add this

position: absolute !important;
top: 30px !important;}

So it looks like this now

.ipsApp #header{
	background: {hextorgb="header" opacity="0.9"};
	box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.15), 0px 1px 0px rgba(0, 0, 0, 0.1);
	position: absolute !important;
    	top: 30px !important;}

Now I also wanted my navigation bar not to move, so if you would like that as well, do it like this! ( remove absolute and add fixed! )

.ipsApp #header{
	background: {hextorgb="header" opacity="0.9"};
	box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.15), 0px 1px 0px rgba(0, 0, 0, 0.1);
	position: fixed !important;
    	top: 30px !important;}

# THIRD ISSUE #

I have posted this earlier in my thread, but I'll make sure to repost it in this post!

I have removed the bottom breadcrumb by going into the AdminCP -> Themes -> HTML & CSS Edit -> Templates -> globalTemplate

Remove this line :

{template="breadcrumb" app="core" group="global" params="'bottom'"}

That's it! Thank you all for your help and see you around!

Edited July 14, 2018 by ilovekiwi

[mr-pimpen]

this is the only thing i can come up with add this in one of my files it will move the logo

 

#ipsLayout_header header {
 text-align: center !important;
 } 

 

[mr-pimpen]

my on my pc i save my css txt in casei dont want to use any more so i save them for members that ask for help i just had the logo center

[mr-pimpen]

i might not kno the answer to that but u can wait and see who will answer your second question sorry

[Tony]

Just realized I misread the part about the logo and I can tell you, without building your own menu, you're not going to be able to position it in the middle of the tabs.

As for the transparency issue, I'm not see it.

[ilovekiwi]

A third of my problem has been fixed. I have removed the bottom breadcrumb by going into the AdminCP -> Themes -> HTML & CSS Edit -> Templates -> globalTemplate

Remove this line :  {template="breadcrumb" app="core" group="global" params="'bottom'"}

Edited July 10, 2018 by ilovekiwi

[ilovekiwi]

3 minutes ago, mr-pimpen said:

this is the only thing i can come up with add this in one of my files it will move the logo

 

#ipsLayout_header header {
 text-align: center !important;
 } 

 

What do you mean by 'my files'?

[ilovekiwi]

Do you have any idea where would the be the logo in PHP? I removed the code earlier ( something with flex01 ) and now it's not showing at all, not even if I access AdminCP and I try to put it again.

Edited July 10, 2018 by ilovekiwi

[ilovekiwi]

Thank you anyways , I'll try your method and come with an update when I'll get the logo back working.

[mr-pimpen]

no problem but that will work it will move the logo to the center of your forums

9 minutes ago, ilovekiwi said:

Thank you anyways , I'll try your method and come with an update when I'll get the logo back working.

did you try to see if the logo is still in the Theme Resources try that see if that will help

it will look like this

{resource="enhancements/ips.png" app="core" location="admin"}

 

Edited July 10, 2018 by mr-pimpen

[ilovekiwi]

I have added the logo back, but now it's way too big. Wasn't there an option to automatically set it to the height of the navBar?

[mr-pimpen]

what size is the logo you might have to resize it to fit your header

[ilovekiwi]

602x315, but before the system would've automatically resized the logo to the height of the navBar. Guess I didn't recover all the code.

I have fixed the issue with the logo but still did not get in which file I should place your code. Any more specific explanation? Maybe a name of the template / CSS file?

[mr-pimpen]

21 minutes ago, ilovekiwi said:

602x315, but before the system would've automatically resized the logo to the height of the navBar. Guess I didn't recover all the code.

I have fixed the issue with the logo but still did not get in which file I should place your code. Any more specific explanation? Maybe a name of the template / CSS file?

CSS file

[ilovekiwi]

Which one?