Logo i horizontal menu - How?? |
|
Brannan
|
Putting a Logo into a horizontal menu and making it look right has been a tough challenge for me, I thought someone might benefit from the solution I came up with.
The problem with the first part of my above tutorial, is once you get your logo into the background of the menu, in responsive screen widths, if you try to css style the menu out from on top of your logo, your logo moves down with the menu. (If someone has a solution I haven't thought of, please let me know.)
Following is an update on the Responsive CSS portion of my how-to:
1.) Open the document you created in the first portion of my tutorial above and select the Background tab.In the "Texture or Image" section of the ribbon, select "From File" and import your logo into your website's background (Position: Top Left, Blend Mode: Normal).
2.) In my case, I have a coloured background... So, still in the Background tab, in the "Background" section select "Fill Color" and add the appropriate colour.
3.) Export the document. (I am doing a Wordpress theme, but I guess this will work in other formats).
* So, now you have one image of your logo in two places (body background and menu background) in the exact same spot. Upload your Wordpress theme to your hosting account and activate it.
4.) In the Wordpress Dashboard select Appearance, then Editor, then scroll to the bottom of the page and click on "style.responsive.css".
5.) In a new tab, in your browser, open your website (the one we are working on here) and use the browser's Code Inspector to find the Unique Selector for your menu and copy it.
6.) Back in the Wordpress Editor, hit Cntrl F for find and paste the Unique Selector in and find where it is in the "style.responsive.css" document. My code looks like this:
/* dynamic width nav */
.responsive nav.art-nav,
.responsive .art-nav-inner
{
width: auto !important;
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
margin-top: 0;
margin-bottom: 0;
min-width: 0;
text-align: right !important;
}
Depending on how you styled your menu, your's will be different. Following are the changes I made:
/* dynamic width nav */
.responsive nav.art-nav,
.responsive .art-nav-inner
{
width: auto !important;
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
margin-top: 23px; /* This is how far the menu had to drop to clear my logo */
background: none; /* This deletes the logo we place in the menu's backround */
margin-bottom: 0;
min-width: 0;
text-align: right !important;
background: url('images/nav_back.png'); /* I added this to mask the body background logo, because in my theme I could see it thru my menu's drop down (I tried just adding a background colour, but it covered up my logo). */
}
7.) Now all that is left is to change the code that controls when the responsive version kicks-in so the menu stops covering-up your logo. Hit Cntrl F again and search for "@media." My code looks like this:
@media all and (max-width: 1250px) /* The max-width is all you need change */
{
#art-resp, #art-resp-t { display: block; }
#art-resp-m { display: none; }
.art-nav { margin-top: 80px; } /* my addition */
}
And that's it. Hope that helps.
|
| |
|
|