Jump to content

Archived

This topic is now archived and is closed to further replies.

globalnative

Centering fixed navbar logo and menu; also resizing logo

Recommended Posts

globalnative

Hi Guys!

 

I'm wanting to center the fixed navbar's logo and menu items if possible please. how do I do this?

 

I would also like to make the logo larger.

 

Website is http://natemaingard.com/

 

Any help appreciated, thank you!

Warm regards

Nate

Share this post


Link to post
Share on other sites
James B

Hi there,

 

The logo in the fixed navbar section is set to a maximum height of 29px. You can override this using css and adjusting the px figure to the size you feels fits.

 

.navbar .plbrand img {
    max-height: 29px;
}
 
The fixed nav is designed so the logo goes on the left, then the menu on the right. So both appear on one line etc. As your logo is quite long and you have quite a few pages in the menu, it's moving it down to the next line as both can't fit in the space etc. You can apply a margin-left to the .navline class to give the appearance of it being centered in your current set up. But keep in mind people on larger screens will see the logo and the nav all appear on one line.

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
globalnative

Hi James B, thanks for getting back to me.

 

It's shame that the fixed navbar is not more customisable, it's such a great feature, but I'd way rather have a big centred header image with the menu items populating beneath it. 

 

Is there another way I could get a fixed navbar which would be able to do what I'm wanting?

 

Thanks again

Nate

Share this post


Link to post
Share on other sites
Danny

Hi Nate,

 

You can do this in theory. However, it will take some extensive CSS. I can give you a brief walkthrough (quick example some additional CSS maybe required), as for something like this we do not provide extensive CSS support.

 

1. Create a Menu, call it fixedmenu, this will give your <ul> tag an id of #menu-fixedmenu make sure your that the menu has an odd number of menus i.e. 5, 7, 9 etc..

2. Then fill out your menu items and position them so that there are equal menu items either side, leaving the middle one for your image, like so:

 

Home     News     Forums     LOGO IMAGE     Portfolio     About us     Contact us

 

3. The LOGO IMAGE, is where you're going to add your image.

4. Now we need to center the navigation, to do this I firstly recommend disable the search form, otherwise it wont look right. So add the following CSS to your custom CSS/LESS.

 

#menu-fixedmenu {
float: none;
text-align: center;
}
 
#menu-fixedmenu li {
float: none;
display: inline-block;
}

 

5. Save these changes, when DMS reloads, the Fixed Menu should now be centered.

6. Now we need to add your image, for this example I am going to use CSS. To do this, you will need to target the Logo Image menu items ID, use Google Chrome dev tool.

7. Once you have the ID, replace the id in the code below with your menu items ID.

 

#menu-item-321 a {
background-image: url(Add your Logo image URL here);
background-size: 100%;
background-repeat: no-repeat;
background-position: center center;
color: rgba(0, 0, 0, 0);
}
 
8. You should end up with something like this:
 
 
**Things to note:
 
You will most likely need to alter the CSS to increase the size of the image, as well as the font-size etc.. Please remember this is just a quick guide.
 
Hope this helps you get the right track!

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jmad

Danny

For step 1 how do you do that?

Share this post


Link to post
Share on other sites
Danny

What do you mean ?

Just go to Wordpress Admin Dashboard > Appearance > Menu and create a menu.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jmad

Oh.  I thought you were referring to something completely different.

 

Thanks.

Share this post


Link to post
Share on other sites
vanessabt

before the switch to dms 2 my site fixed nav logo was altered so that the logo was enlarged, I used the following to modify it

 

.navbar .plbrand img {
    max-height: 50px;
}
 
after the most recent upgrade to dms2 the code remained but the logo became smaller and I can't seem to get it to go back.  when i use inspect element i noticed that it changed to this...
.section-navi img {
  1. max-height100%;
}
 
do i need to replace .navbar .plbrand with .section-navi in order to make the change?
 
Please advise.

Share this post


Link to post
Share on other sites
greenfly

Hello @vanessabt 

 

Could you create your own topic for this and we will be able to help - responses to this post are lost as it is marked as answered 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites

×