Header Appearance, Logo and Menu like current site with Sydney Pro

Hi,
I am trying to rebuild the following site with Sydney as the old theme is deprecated and not supported anymore for two years now.

I tried a lot of different custom css, but I don’t get the header picture, logo and menu work like it is. Here is the site under construction: https://sophisticated-pictures.com/

The biggest problems are:
How do I get the menu to the bottom of the background pic and the logo to the center?
How can i stretch the background of the menu to the full site without stretching the menu items?
How do I get the menu and header collapse like in mobile view of current theme?

Here is the css code I am actually using, but it is not satisfying.

#mainnav ul li a {
float: none !important;}

.mainnav {
    background: rgba(255,255,255,.8);
margin-left: -250px;
margin-right: -250px;}

.mainnav a {
display: block;
letter-spacing: .5px;
line-height: 1;
padding: 15px 10px;
text-decoration: none;
text-transform: uppercase;
}

#mainnav ul li a:hover {
background: #619aa2;
    color: #2d2d2d;}

.site-logo {
max-height: 160px;}

@media only screen and (min-width:1025px) {.site-header { 
padding-top: 250px !important;}

Hello,

How do I get the menu to the bottom of the background pic and the logo to the center?

Currently you have this additional CSS code:

@media only screen and (min-width:1025px) {.site-header {
  padding-top: 250px !important;
}  
}

…try to replace it with this:

@media (min-width: 1025px) {
    #masthead.site-header {
        padding-top: 180px;
        padding-bottom: 0;
    }

    #masthead .col-md-4.col-sm-8 {
        margin-bottom: 98px;
    }
}

How can i stretch the background of the menu to the full site without stretching the menu items?

How do I get the menu and header collapse like in mobile view of current theme?

Please create a separate topic for each of your additional issues to make it easier to help you.

Kind Regards, Roman.
aThemes Support

thank you roman - works fine with some additional lines of code. appreciate your help.

mobile view looks fine now - I managed it by myself.

only open question is to stretch the menu background to full site width. I will open a new topic. this one can be marked as solved.

1 Like