Two Codes Are Interfering With Each Other

I have a code that is interfering with another code this code below moves my toggle category buttons over the category title

Code:

.main-head .page-title {
box-shadow:0px 2px 2px rgba(0,0,0, 0.3) inset;
background:rgba(0,0,0, 0.3);
border-radius:4px !important;
display:inline-block;
padding:4px;
}

Try this:

Code:

.main-head .page-title {
    box-shadow:0px 2px 2px rgba(0,0,0, 0.3) inset;
    background:rgba(0,0,0, 0.3);
    border-radius:4px !important;
    display:inline;
    padding:4px;
    }

same

Are you sure that these two codes are interfering with each other?

SLGray wrote:Are you sure that these two codes are interfering with each other?

yes because If I remove the code that stick the boarder around the category text the toggle button goes back to its correct spot

Hello,

The reason this occurs is because you're displaying the title as an inline element while it is usually displayed as a block level element. Now when it is displayed as a block it spans from left to right depending on its parents size. Your category toggler is appended to the title which is why it is attached to it, or conflicting as you have said. In fact it is not conflicting with anything since the script you're using has appended it to the title.

When you display it is an inline element it will only take up space depending on its contents. If you wish you can see how it looks displayed as a block level element.

Code:

   .main-head .page-title {
    box-shadow:0px 2px 2px rgba(0,0,0, 0.3) inset;
    background:rgba(0,0,0, 0.3);
    border-radius:4px !important;
    display:block;
    padding:4px;
    }

nothing happened with that code

May I ask, have you removed the code that you originally posted above before testing ?

yes

Well, since your button is appended to the title you could try positioning absolutely inside the main header.

For example :

Code:

.page-title { position:static !important; }
.main-head { position:relative; }
.contract, .expand {
position:absolute;
top:5px;
right:5px;
}

Then just readd your old CSS for styling the title.

Ange Tuteur wrote:Well, since your button is appended to the title you could try positioning absolutely inside the main header.

For example :

Code:

.page-title { position:static !important; }
.main-head { position:relative; }
.contract, .expand {
position:absolute;
top:5px;
right:5px;
}

Then just readd your old CSS for styling the title.

the code will not move the toggle button I'm not sure what the issue is  

It could be coming from your script to append the button, then.

this is what the last code you gave me did lol

Then add this back in to style the page title :

Code:

    .main-head .page-title {
   box-shadow:0px 2px 2px rgba(0,0,0, 0.3) inset;
   background:rgba(0,0,0, 0.3);
   border-radius:4px !important;
   display:inline-block;
   padding:4px;
   }

That is what you wanted to do, no ? Otherwise you will not see any changes.

Ange Tuteur wrote:Then add this back in to style the page title :

Code:

    .main-head .page-title {
   box-shadow:0px 2px 2px rgba(0,0,0, 0.3) inset;
   background:rgba(0,0,0, 0.3);
   border-radius:4px !important;
   display:inline-block;
   padding:4px;
   }

That is what you wanted to do, no ? Otherwise you will not see any changes.

I added that code back in my very first post and no luck I have messed with the numbers to see if that will move the toggle and nope its stuck right there in that corner.  

Add important to the position properties.

still nothing that is strange once I remove the code the toggle goes back to the right spot I don't know what code that I'm running would be interfering with it.

Just like if I disable the forumotion bar at the top it knocks out the toggle button completely.

You did this ? :

Code:

.page-title { position:static !important; }
.main-head { position:relative !important; }
.contract, .expand {
position:absolute !important;
top:5px !important;
right:5px !important;
}
    .main-head .page-title {
   box-shadow:0px 2px 2px rgba(0,0,0, 0.3) inset;
   background:rgba(0,0,0, 0.3);
   border-radius:4px !important;
   display:inline-block;
   padding:4px;
   }

that right there solved the problem 


Thanks for all your help. Sorry if I drove you bonkers lol

You're welcome, don't worry about.

Topic solved and archived