locked
Removing the nav-bar in Site.master RRS feed

  • Question

  • User-1793215261 posted

    Hello

    I have commented out the nav-bar in Microsoft's WebFormsIdentity template which holds over 10 CSS style sheets (plus a couple of my own). It is not possible to keep the nav-bar as part of my Web forms project. The nav-bar, which stretched right along the top of each of its aspx pages, holds links called Application, Log-in, etc and, when it is present, it results in pushing the rest of the site content down 50px because that is how deep it is.

    Consequently, now that it does not exist on my pages, there is a gap of 50px along the top and the date I have, for example, which should be about 20px from the top, is now about an inch from the top and the pages need to be 'pulled up'. I have gone through the CSS files which I thought would allow me to close this 'gap' and found this which comes with the template: Site.css.

    At the top of that Site.css stylesheet there is this (the commented out line at the top is Microsoft's own):

    /* Move down content because we have a fixed navbar that is 50px tall */
    body {
        padding-top: 50px;
        padding-bottom: 20px;
    }

    I thought that by commenting out 'padding-top' it would close the 'gap', but it makes no difference and the 'gap' of about an inch deep remains. Is that because I have kept these lines in Site.master:

    <div class="container body-content">
                <asp:ContentPlaceHolder ID="MainContent" runat="server">
                </asp:ContentPlaceHolder>
            
          </div>

    I am quite sure that I have to keep those lines in because the ID of MainContent allows the pages to function.

    What might be the best way to solve this, please?

    Thursday, May 9, 2019 11:06 AM

Answers

  • User839733648 posted

    Hi Bluenose,

    According to your description, I'm sorry that I could not reprodcue your issue successfully.

    I've built a webform default master page and have a test.

    After I comment out the body css of Site.css and the class="container body-content" div,

    you could see from the screenshot that there is no any gap around the test text( testing if have gap).

    If possible, please provide more details like a simple demo code with your running screenshot,

    this will be easier for us to help with you.

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, May 14, 2019 6:39 AM

All replies

  • User-474980206 posted

    use the browser debug tools to find the CSS responsible.

    Thursday, May 9, 2019 3:25 PM
  • User-1793215261 posted

    Thank you for your reply.

    I have tried removing the body-content code I pasted above and it makes no difference: the space left by the removed nav-bar still remains and so my pages look too low down on screen. Yes, Inspect may be a good place to start. Since this project has 14 external style sheets, one of which has almost 7,000 lines of code, which CSS attributes should I begin to look for in Inspect Element? Padding, margin, etc?

    Thanks again.

    Monday, May 13, 2019 9:26 AM
  • User839733648 posted

    Hi Bluenose,

    According to your description, I'm sorry that I could not reprodcue your issue successfully.

    I've built a webform default master page and have a test.

    After I comment out the body css of Site.css and the class="container body-content" div,

    you could see from the screenshot that there is no any gap around the test text( testing if have gap).

    If possible, please provide more details like a simple demo code with your running screenshot,

    this will be easier for us to help with you.

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, May 14, 2019 6:39 AM
  • User-1793215261 posted

    Hello Jennifer

    Sorry for the delay in replying.

    I will comment out the body css of Site.css and the class="container body-content" div, as you have done and see what the result is.

    In terms of a simple demo code, I am simply trying to modify Microsoft's existing code. I don't think I can upload screenshots here, but will look around the Net and post a link.

    Thanks again for your help.

    Monday, June 10, 2019 10:01 AM
  • User753101303 posted

    Hi,

    Use F12 in your browser to inspect styles and see what happens. A common issue is to load a cached version of the CSS file (try Ctrl+F5)

    Monday, June 10, 2019 11:22 AM
  • User-1793215261 posted

    Hello Jennifer

    Many thanks for your code - that's done the trick.

    I wasn't sure if I could get away with removing the asp:PlaceHolder, but the pages look much better now that they have been 'pulled up'.

    Regards

    Tuesday, June 18, 2019 11:59 AM