0

I have modified the header.php file and CSS to get a second logo working on my page here: dev.dutil.com/optilink-testpage

It's the OptiLink logo on the right. At full screen, I've gotten it about where it needs to be with this CSS:

.secondLogo { 
padding-top:15px;
display:block;
margin-bottom:-30px;
width:110px;
height:75px;
float:right;
position: absolute; 
top: 0; 
right:12%;
z-index: 1000; 
}

However, with responsive design it's not working fully. When I collapse the window it will push really far in and then snap back to where the big hero image is but it's inconsistent. I tried to create a media screen rule as well but i'm having issues one way or the other.

Basically, the OptiLink logo on the right needs to stick to the edge of the container/hero image like the Dalton utilities logo, no matter the screen size. Any tips on how to better achieve this?

Improve this question
1
  • This is not an answer on you question but i would set the z-index of you #nav-toggle higher – CompactCode Apr 23 '17 at 18:20
1

With the use of bootstrap (which u use) this is fairly simple.

You can just do like this =

<div class="container">
<div class="row">
<div class="site-branding">logo 1</div>
<div class="secondLogo">logo 2</div>
</div>
</div>
*menu goes here*

first div you give :

.site-branding {
    float: left;
    margin-bottom: -30px;
width: 110px;
}

Second div :

.secondLogo {
    float: right;
    position: relative;
}

enter image description here

enter image description here

enter image description here

Improve this answer
8
  • I tried that CSS but no luck, it actually pushed the optilink logo into the hero image. Also, I have the sitebranding set to float:none so that it remains on top of the nav menu, and floating left causes it to alight when responsive with this CSS – H.Norman Apr 23 '17 at 18:57
  • please note that i'm adding a div with the class "row" around the 2 div's and that i have the menu under that. I'm more then happy to help you with some live coding and checking as i need the points to set a bounty on a question of my own – CompactCode Apr 23 '17 at 19:10
  • I know for sure that this setup should work since i love coded this onto your website and checked all responsive modes (as you can see in the pictures) – CompactCode Apr 23 '17 at 19:15
  • Ok that would be fine, but how are you suggesting to add the row class? Since it's wordpress, I had to add the second logo image through HTML in the header.php file – H.Norman Apr 23 '17 at 19:22
  • Well thats a whole other question. Are you building your own theme? Do you have a child theme?. When you create a header.php you can define whatever you want wherever you want. Can you provide the code of you header.php? – CompactCode Apr 23 '17 at 19:26

Not the answer you're looking for? Browse other questions tagged or ask your own question.