Jump to content

Archived

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

Frederic

Increasing fixed navbar height

Recommended Posts

Frederic

Hi there!

 

I would love to increase the height of the fixed nav bar which is currently fixed at 29px.

 

Is there a simple way of doing that, preferably through custom LESS/CSS?

 

Many thanks in anticipation

 

 

Share this post


Link to post
Share on other sites
Rob

If you upload an image taller than 29px, it will probably expand the height dynamically.

 

If not, then use a tool like Chrome's Inspect Tool or Firebug for Firefox to identify the CSS element you wish to change, test it, then copy the code to Custom Code and paste.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Frederic

Hi Rob,

 

MAny thanks but hey ... you are talking to a complete newbie! :-)

 

I did what you suggested and found those lines of codes

 

[attachment=1701:Untitled.tiff]

 

I assume it is the 

 

<div class="fixed-top-pusher" style="height: 36px;"></div>

 

I didn't dare editing it directly in the inspect window - can i?

 

Otherwise, how do i create a class to insert into custom LESS/CSS - i tried different lines but i have to admit i have no idea about how to do that ...  :phew:

 

Hope you can help,

 

thanks in anticipation.

Share this post


Link to post
Share on other sites
Frederic

Oh, forgot to say - tried to upload a bigger image but it remains constrained in the same 29px ...

Share this post


Link to post
Share on other sites
Danny

Hi,

 

You can increase the max-height using the following code:

 

#site .navbar .plbrand img {
max-height: 40px;
}

 

Can the value to whatever you like. Please be aware, that in adding this you may need additional CSS. 


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Frederic

Hi Dan,

 

Yes, it works.

Many thanks.

So no need to add any other CSS right?

Share this post


Link to post
Share on other sites
Frederic

Oh, something else related to that if you don't mind:

 

Is there a similar simple way to bring the menu items down a bit and adjust their position so they center vertically?

Hope that makes sense.

 

Many thanks,

 

frederic

Share this post


Link to post
Share on other sites
greenfly

Hello Saforc 

 

I cant see a link to your site with the nav menu on it - if you can provide a link we can take a look at the code for you. 


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
Frederic

Hi Martin,

 

Thanks for your note - http://globalavatar.org/

 

Don't mind the mess - this is not a site yet, i am just using it to explore DMS and play around with things ...

 

Many thanks,

Share this post


Link to post
Share on other sites
Frederic

Hi there!

 

I see what you meant Dan when you were speaking of needing to add some extra CSS - since i inserted the code you gave me,

 

#site .navbar .plbrand img {
max-height: 40px;
}

 

when the code is in custom css, i have problems inserting sections into pages: they do not stick on the page.

I drag and drop and it goes on saving, refreshing and ... there's nothing there.

 

When i remove the code temporarily, there's no problem anymore.

So this is what i have done so far:

remove the code, add my sections, put the code back in custom CSS.

 

It seems to be ok and the new sections stick and work but i assume there is another/better way

 

Here is the code you gave me to increase fixed nav bar's height.

 

Let me know if you can think of a fix.

 

Many thanks in anticipation,

Share this post


Link to post
Share on other sites
Danny

If you wish to move the menu items down so that they're inline with your logo image, you're going to need custom CSS, such as padding or line-height. However, please be aware that we do not provide extensive custom CSS support.

I highly recommend you use Google Chromes web dev tools and inspect your NavBar menu items and try different CSS to get them aligned.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Frederic

OK, thanks Dan, I will do that.

 

And what about the issue of the line of code preventing to load sections?

Any idea what i should do?

Share this post


Link to post
Share on other sites
Danny

The code I gave you shouldn't cause any kind of problem especially with how drag and drop works. I have just added that code to 4 test sites and I do not encounter your issue.

 

However, when viewing your site again, I've noticed you have a cache plugin installed. Cache plugins should not be active until your sites design/layout has been finalised. Therefore, disable that plugin until your site has been completed.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Frederic

ok, thanks Dan, thanks for letting me know. 

 

I have deactivated the cache pluginbut issue remains - i cannot add some sections - nav bar & slabtext mainly - when the code is in custom css and things get ok when i remove it.

 

Simple nav and Y.A.M.S. are working

 

If it is too complicated, i am ok to work with it and remove it for the time being when i need to work with section. It is no big deal.

 

Thanks

Share this post


Link to post
Share on other sites
Danny

Its a rather odd issue, as custom CSS especially the code I gave you should have no adverse effect with drag and drop of sections. I have attempted to recreate your issue, but unable too.

 

Therefore, your issue has to be related to either plugins or third party sections, I recommend disable all plugins except DMS Pro Tools along with all third party sections and see if this resolves your issue.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Frederic

Hi Dan,

 

Done - plugins were ok but when i deactivated WP cache, one file remained as a 'drop in' and was still blocking.

I deleted all the WP cache plugin's files and all is fine.

Many thanks

Share this post


Link to post
Share on other sites
James B

Glad you got it working Frederic :-)


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
Frederic

Hi there,

 

Need your help!!!

 

I have followed your advise Dan and went into Google Chromes, inspect elements and tried some CSS - nothing special happened.

But i also changes some values into the 'inspect elements' section and now i cannot come back to the original ones.

 

I am now stuck with 

<div class="fixed-top-pusher" style="height: 30px;"></div>

 

[attachment=1705:Untitled 1.tiff]

 

Original value was 44px and i have changed the value back to 44px several times in the right hand window 'Styles'.

It brings the top pusher back into place but doesn't hold when i refresh and it stubbornly goes back to 30px.

 

The other thing is that Custom CSS doesn't register any changes when i remove the code you gave me:

#site .navbar .plbrand img {

max-height: 40px;
}

 

Your last advice before i stop messing up ?

Sorry to play the apprentice sorcerer ...

 

Share this post


Link to post
Share on other sites
Danny

If you make changes via Chromes web dev tools, these changes are only done on the fly, they do not effect your live site meaning that if you refresh your page, the changes will be gone.

 

The reason I say to use Chromes web dev tools, is that it allows you to test your code on the fly before you add it, so you can preview what your code will look like. So if you want to increase the height of your NavBar, edit the code I gave you to the value you like.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Frederic

HI Danny, 

 

Yes, I understand that and it was working very well until i did those changes in custom css and 'inspect elements' but i still have those two issues:

 

1. is that one line of code changed from

 

<div class="fixed-top-pusher" style="height: 44px;"></div>

to

<div class="fixed-top-pusher" style="height: 30px;"></div>

 

 

2.  is that although i removed the code you gave me, the fixed nav bar still display the position as if the code was there.

 

Have a look

http://globalavatar.org/

 

- The fix nav is set on 40px as if the code you gave me was in custom CSS although it is not anymore

 

- And the content below the fix nav is set on 30px although it should have remained on 44 ...

Share this post


Link to post
Share on other sites

×