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 { 
position: absolute; 
top: 0; 
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?

  • This is not an answer on you question but i would set the z-index of you #nav-toggle higher Apr 23, 2017 at 18:20

1 Answer 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>
*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

  • 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, 2017 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 Apr 23, 2017 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) Apr 23, 2017 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, 2017 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? Apr 23, 2017 at 19:26

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