Logo in the TopBar

Resolved

(@g33kmonkey)

Hey Alex, first I want to let you know, I love your theme! Thanks for the nice work and all the updates! I downloaded it directly from your homepage.

I use your theme on my blog: http://geekmonkey.de. As you can see I made some changes.

Since a few hours i try to put the logo up in the topbar on the left side. this is working so far, … but if I shrink the browser, .. I got a overlay with the topbar menu. So I guess my work-around is not working – haha. For all this I use a Child Theme.

In the css I use this code:

/* Topbar */
#nav-topbar.nav-container { border: 1px solid red; background: #26272b;
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2),0 1px 0 rgba(255,255,255,0.15);
box-shadow: 0 0 0px rgba(0,0,0,0.2),0 0px 0 rgba(255,255,255,0.15); }

#top_logo {
  width: 250px;
  height: 55px;
  position: absolute;
  top: 1px;
  left: 10px;
  border: 1px solid blue;
 }

The red and blue border I just used to check

In the header.php I made this changes:

<?php if ( has_nav_menu('topbar') ): ?>
			<nav class="nav-container group" id="nav-topbar">
                            <div id="top_logo"><img src="wp-content/themes/geek/img/top_logo.png"></div>
				<div class="nav-toggle"><i class="fa fa-bars"></i></div>
				<div class="nav-text"><!-- put your mobile menu text here --></div>
				<div class="nav-wrap container"><?php wp_nav_menu(array('theme_location'=>'topbar','menu_class'=>'nav container-inner group','container'=>'','menu_id' => '','fallback_cb'=> false)); ?></div>

Maybe you, or anybody else have an Idea, how to solve this problem.

Viewing 9 replies - 1 through 9 (of 9 total)

bdbrown
(@bdbrown)

11 years, 4 months ago
Hi g33kmonkey. You might try this and see how it works for you:

Menus – Screen Options enable CSS Classes
Select a Links menu item
URL is your site
Link Text blank
Add to Menu
After adding to menu, open “Menu Item” and set CSS Class to “topbar-logo”
Move it to the top of the menu

Add the following to your child theme css:
```
#nav-topbar .nav li.topbar-logo a,
#nav-topbar .nav li.topbar-logo a:hover {
  display: block;
  background-image: url('http://path to your logo');
  background-repeat: no-repeat;
  text-indent: -9000px;
  padding-top: 10px;   // using a 64x40 image
}
```
Thread Starter g33kmonkey
(@g33kmonkey)

11 years, 4 months ago
Hey bdbrown, thanks a lot!!!

It seems to work. I just must figure out how to not display the logo in the menu from the smartphone, because this seems strange 😀

I just must add the size from the logo in the css:
```
#nav-topbar .nav li.topbar-logo a,
#nav-topbar .nav li.topbar-logo a:hover {
  display: block;
  background-image: url('../geek/img/top_logo.png');
  background-repeat: no-repeat;
  text-indent: -9000px;
width: 229px;
height: auto;
}
```
This works for me, thx!!!
Thread Starter g33kmonkey
(@g33kmonkey)

11 years, 4 months ago
Perfect, I got it!

Just have to add the same, but with display:none to the
@media only screen and (max-width: 719px) {
```
#nav-topbar .nav li.topbar-logo a,
#nav-topbar .nav li.topbar-logo a:hover { displaycnone;}
```
Can I add awesome fonts to the topbar too like this?
densahmad
(@densahmad)

11 years, 2 months ago

Hola G33kmonkey, your code to dont display at smartphone just add in custom css?

Thread Starter g33kmonkey
(@g33kmonkey)

11 years, 2 months ago

Guess you can do this. I use a self made child theme, so it’s in my standard css file. But if you just modify the original hueman theme, you can just add this in the custom css
😊
tandon316
(@tandon316)

10 years, 10 months ago
I applied this code to custom css
```
#nav-topbar .nav li.topbar-logo a,
#nav-topbar .nav li.topbar-logo a:hover { displaycnone;}
```
but It’s no working on mobile menu.
tandon316
(@tandon316)

10 years, 10 months ago
I applied this code to custom css
```
/*
Add your custom styles in this file instead of style.css so it
is easier to update the theme. Simply copy an existing style
from style.css to this file, and modify it to your liking. 

When you update your theme, backup this file and re-add it after.
*/

/* Global */
.mystyle {}

/* Tablet - 800px, 768px & 720px */
@media only screen and (min-width: 720px) and (max-width: 800px) {
	.mystyle {}
}

/* Mobile - 480px & 320px */
@media only screen and (max-width: 719px) {
#nav-topbar .nav li.topbar-logo a,
#nav-topbar .nav li.topbar-logo a:hover { displaynone;}
	.mystyle {}
}

/* Mobile - 320px */
@media only screen and (max-width: 479px) {
	.mystyle {}
}
```
url

but It’s no working on mobile menu.
anggaes
(@anggaes)

10 years, 5 months ago

hello, i’ve tried this way

#nav-topbar .nav li.topbar-logo a,
#nav-topbar .nav li.topbar-logo a:hover {
display: block;
background-image: url(‘http://path to your logo’);
background-repeat: no-repeat;
text-indent: -9000px;
padding-top: 10px; // using a 64×40 image
}

it works in localhost, but when I try it in my hosted site (usukali.com), it didnt work correctly. I try to change value of background-color to check the css in child theme, but it still dont work.

But, when I override the background-color for sidebar, it work correctly. Please, help me

bdbrown
(@bdbrown)

10 years, 5 months ago

@anggaes – You’ve already posted this question in a separate topic. Please don’t double post, especially in a topic that is 4 months old and is marked as Resolved. Thanks.