Hi,
I would prefer placing the logo in the “menu” when scrolled down with fixed menu on desktop browser.
Current implementation: Logo is placed in header and when scrolled down logo gets out of viewport.
Scrolling down – no logo
In responsive mode you place the logo in “menu”, like here:
Hello,
You can add the logo on menu, edit menu_header.php file http://screencast.com/t/glaGrnIWhUBr add your logo there and hide it when you are on mobile using this in style.css
/* responsive phone */
@media (max-width: 767px) {
use display:none;
}Thanks
can you please describe more further how to put logo on fixed menu when its scrolled down (desktop browser)? thank you in advance 😉
Hello,
Another solution is to add the logo with <img src=""/> tag directly in menu as an item from menu and hide it from CSS with this code: *replace menu-item-525 with you CSS selector of the logo.
.affix .menu-item-525 {
display: none;
}Thanks!
hi marius,
thank you for your replay.
we want that logo appears only when the page is scrolled, how to make that?
Hello,
Use the css provided above but don’t forget to change the menu-item-xxx with yours
.affix .menu-item-525 {
display: none;
}Give me your site URL weith logo in menu and i will give you the fix.
Thanks!
Hi Marius,
I administrate website http://www.uesmag.com for “per123” and add logo directly in menu
<img src="images/uesmag_logo_header_white.png" height="26" width="152" />
but which css I must change with
.affix .menu-item-525 {
display: none;
}Thanks
Hello,
When you add the logo in menu, that create a menu in item, you have to take the selector of that item and use it instead of .menu-item-525 number
I show you an example with your logo:
1. I’ve added the logo in menu with img http://screencast.com/t/klXNT9666Z2
2. Go to you site and see the logo, click to inspect it with firefox or chrome inspector and see what ID have in menu(in my case have 4224 http://screencast.com/t/I0BexzmDd
3. Add this CSS in style.css, don’t forget to replace the ID with yours.
.menu-item-4224 {
display: none;
}
.affix .menu-item-4224 {
display: block;
}4. Results: http://screencast.com/t/VhdRQuH4cy
Hope this help!
Thanks for the message!
Hi,
I have added logo in the menu and added css in style.css as you explained but only works at home page.
Thanks
Marius, I’ve followed your instructions, and it works great on desktop.
1. However, the logo-menu-image doesn’t show when I zoom in until the category menu button changes from three lines to nine small squares. I would like the image to follow in the menu bar when I scroll down on a mobile device.
2. How do I make the logo-menu-image center-aligned? I’ve tried to modify the display: block; line, but with no luck.
Thanks,
Are
Hi,
@pixelfreak on a category page it show http://screencast.com/t/fe0SbcAU0Z
on article shows to: http://screencast.com/t/Wn0tzc76P7Ck
On ipad Vertical the space is limited in menu and you have more items, what you can do is to make the menu text and space on Ipad smaller to fit it, try this CSS
@media (min-width: 768px) and (max-width: 1018px) {
.sf-menu ul a {
font-size: 11px !important;
}
.sf-menu > li > a {
font-size: 11px !important;
padding: 0 5px !important;
}
.sf-menu a.sf-with-ul {
padding-right: 26px !important;
}
}Thanks!
I am trying something similar to this, I want my logo in the menu on the left I have already got this working, I have used CSS to remove the header section so it doesn’t show my logo there, but will comment out locate_template(‘parts/header-style-1.php’, true); in the header.php file once working correctly.
I just have a few questions to get this working as I require.
I want to have my logo on the left on all devices , so I have placed the menu item as the first one to get this working on my desktop version, but for other devices I get the logo on the right, how do I get the logo on the left and menu on right for other devices?
I also want a larger logo than the one I have seen people use, how do I increase the height of the menu to place a larger logo while still having the other menu items show correctly?
for further info of what sort of thing I am looking for checkout http://www.cranialink.com/..but obviously I want my menu to look like the one that comes with my theme.
Hi,
You can make it via CSS, similar to this: http://screencast.com/t/Mpionp9tmt I’ve makes with Firefox inspector some CSS modification.
Thanks! 🙂
Visit – http://www.techprevue.com
