Jump to content

Archived

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

mrmiyamoto

Changing height of main Navbar only

Recommended Posts

mrmiyamoto    2
mrmiyamoto

Site: http://beta.animemovieguide.com

 

My inquiries regarding various customizations with DMS 2.0 have been largely met with people espousing the benefits of how easy DMS makes changing things with CSS.

 

Well, I decided to try and increase the height of my main navbar to test that out (and naturally because I want it a little taller).

 

So far I've managed to get some results with the below inserted into the Custom LESS/CSS section:

#navbarumjhken .pl-content {
  height: 40px;
}

I've run into several problems trying to modify the height or line-height for the rest of the elements involved though including:

 

  1. Putting "height: 40px;" into the Inline CSS Styling section of the navbar did all of nothing
  2. There doesn't seem to be a save button when editing the Custom LESS/CSS section in the DMS, the Publish button seems to have no effect as when I refresh the page after publishing the code I've added there is gone.
  3. Finding the specific elements to change their properties is becoming very tedious because I have to switch back and forth to Firefox so I can use Firebug to find them.  Only supporting Chrome becomes a significant issue when you want to do something more in depth like this.
  4. Only having the specific ID of a section in the <section> tag makes it difficult to change the CSS for things deeper within it.  If the class ID  (ie. "umjhken" in this case) could be added as an extra class or at the end of ID names (or something) to everything within the section it would help with the pinpointing and prevent me from having to do something like: "#navbarumjhken #menu-top-menu-1 .navline > li > a"  or something like that, which is where I feel this is heading.

Basically, is it possible for me to get a list of elements whose height/line-height/margin/padding I'm going to have to change to increase the height of this specific navbar a tad?  Finding them manually hidden within the deep tag nesting of the DMS code seems to be more trouble than its worth at the moment.

Share this post


Link to post
Share on other sites
batman    389
batman

HI mrmiyamoto

I test the Inline CSS Styling section with

height: 40px (without quotes)

This works fine to me

http://screencast.com/t/l9HpnIhmtrTR


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
mrmiyamoto    2
mrmiyamoto

HI mrmiyamoto

I test the Inline CSS Styling section with

height: 40px (without quotes)

This works fine to me

http://screencast.com/t/l9HpnIhmtrTR

 

I've tried with/without quotation marks as well as with/without a semicolon and nothing seems to affect its height.

Share this post


Link to post
Share on other sites
mrmiyamoto    2
mrmiyamoto

I checked again with a higher number and it seems like the inline CSS property there changes the height of the container for the navbar but not the bar itself.  That makes it look taller on yours because of the black background but only adds space beneath mine because I'm using the blue theme for it.

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

is this issue now resolveD? 


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
mrmiyamoto    2
mrmiyamoto

is this issue now resolveD? 

 

Nope, my question has yet to be answered.  Thanks for checking, though.

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

Details relating to CSS controlling height are found here http://www.w3schools.com/cssref/pr_dim_height.asp

 

There is an issue at the moment with saving CSS in some instances, this is being worked on by the Core Dev's so we will update you when this is resolved. 

 

For now make sure your pages have templates assigned and if the issue persists try disabling all non pagelines plugins. 

 

Also can you enable debug for us in site settings > advanced 


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
mrmiyamoto    2
mrmiyamoto

Sorry if it wasn't clear in my original post.  I really do understand how CSS works, what I'm requesting is a list of elements (ex:  .section-navbar .navbar .navline > li > a, .searchform .btn-search, etc.) that I need to change in my case to get everything vertically centered in a navbar that is taller than the default height.

 

I'm asking for this because A) DMS is making it harder than it would normally be to find these elements by using heavily nested code and restricting the use of Firebug/DMS concurrently by not supporting Firefox development and B ) Because this is the forum where we're apparently offered expert help with our individual customization projects, of which this is one.

 

Thanks.

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

You can still use firebug in firefox - nothing is stopping you there. Firebug lite is somewhat ok for this but i tend to open Firebug in firefox and pull the CSS selectors and code from there.

 

We do not provide help customizing your site. We provide help with PageLines Products and features. We help to use the Sections and features and help to get bugs fixed etc. 

 

CSS is used to style to site beyond the standard features and we do not provide in depth support for this. 

 

There are lots of communities online dedicated to helping with code and in particular CSS> 


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
mrmiyamoto    2
mrmiyamoto

You can still use firebug in firefox - nothing is stopping you there.

 

Okay, I guess I misconstrued the purpose of the Customization forum then, thanks for the info.  Not being able to run the DMS editor at all in Firefox is most certainly hampering the process, though -- I'll try spoofing my useragent and see where that gets me.  Thanks again for the clarifications.

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

No Problem - i assure you we are working on the issue.

 

You can ask for help with code you have tried in the customizations forum but we do not style your site for you. you need to do the leg work as it were. 

 

Understanding the CSS issue is hampering efforts. 

 

There are a few work around on all the forum posts. 


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

  • Similar Content

    • wyo22ski
      By wyo22ski+
      Hello,
       
      I'm basically a designer and understand a little on how to change CSS, etc., so please excuse my ignorance...  I recently upgraded to the newest platform from the DMS and my old DMS theme no longer functions.  I'm trying to replace the image slider that my Horizon Photography Theme (Nick Haskins) had created.  The Impulse image slider seemed the closest to what I need, but there are problems.
      It seems the the Impulse section for sliding images defaults to the image width, no the height.  I can change the Impulse stage height and width, but this does nothing to the internal content.  For instance, if I change the height to 200 pixels, the image remains the full width and only shows a cropped section.  I would like the ability to change the Impulse height, and have the image height fit space. 
      I've put this custom CSS in, but again, this only controls the stage height of Impulse:
      .pl-sn-impulse .pl-impulse-cell .cell-wrap, .pl-impulse-container, .owl-stage-outer {
        width: 100%;
      }
       
      Any suggestions welcome.  Thanks 
    • Grant Turck
      By Grant Turck+
      Navbar Broken on All Devices When Not Logged Into Wordpress. See screenshots attached from mobile. What is causing this issue and how do I fix? Site is venicepride [dot] org.


    • PierreFF
      By PierreFF+
      Hello, 
      I have an issue with NavPro on mobile when the link of the menue is on the same page. 
      Here is my website: http://foundersofthefuture.co
      The isssue comes from the fact that in my menue most of the items send somewhere else on the same page using anchor link (eg. #container_u788888). 
      This works well on desktop but on mobile, nothing happens when clicking on the link. One of the link of the menue of the homepage "France" sends to another page of the website and this one works well even on mobile. 
      I am using the Pagelines framework theme and also used a wordpress plugin (jQuery Smooth Scroll) for smooth scrolling . 
      Thanks in advance for your help and let me know if I need to provide more information. 
      Best,
      Pierre
    • Samuel Costa - UDF
      By Samuel Costa - UDF+
      Hi. I made this site: www.arvoredacidadania.org.br. In the part Quem Somos and Serviços I used different configurations (1 container and 2 texts side by side; 2 containers: each one with text; or just two texts side by side).
      The problem is the height. I tried CSS, etc, but when i change the width, change the height also.
      Any ideas?
      This picture is the example how i need to do.
      I need both textboxs with the same height.
      Regards.

    • tristanrodgers
      By tristanrodgers+
      Hi there!
      I'd love to have some social media buttons in my navbar like my online-shop has!
      http://mc1r-magazine.com/
      Can someone explain me how to create them? I tried a lot but don't know how to realize them...
      Greetings from Germany,
      Tristan
×