WordPress.org

Forums

Customizr
[resolved] Navbar box changes position with the shortening of the window (16 posts)

  1. jasfmo
    Member
    Posted 1 year ago #

    Hi,
    First of all let me tell you that I am newbie in this matter and I'd ask some help on a subject below.
    As the design of the logo is vertically shaped and I took the advantage of using the snippet called as "Adjust Navbar Box Settings" and inserted in the CSS box of
    Child theme the following code in order to align the navbar with the bottom of the logo:

    /* Reposition Navbar Box - change top/left as needed */
    .navbar-inner {
    position: relative;
    top: 150px; /* Adjust using -1px move Up, 1px move Down, 0px No change */
    left: 0%; /* Adjust using -1% move Left, 1% move Right, 0% No change */
    }

    As matter of the fact navbar moved down (due to the shape of the logo) but when the window is shortened , in responsive mode, the
    navbar overlaps the slides. How can I fix this situation?

    Site is still being constructed as this URL shows
    http://www.t-decisions.oo3.co/BL/
    Thanks in advance

  2. rdellconsulting
    Member
    Posted 1 year ago #

    This is causing a problem:

    .navbar-inner {
        left: 0;
        position: relative;
        top: 150px;
    }

    change the 150px to 0px and navbar will return to where it should be.

  3. jasfmo
    Member
    Posted 1 year ago #

    Thank you. In terms of design of the home page it would be nicer to have navbar box at the bottom of the header instead of at the top. You say it is not possible, but isn´t there other way around to maintain this layout as proposed? The problem I thimk has to do with the logo's shape, but this what our graphic designer purposes.

  4. rdellconsulting
    Member
    Posted 1 year ago #

    Take a look at the Snippets, as there's lots of customizing you can do.

    Take a look at Centering the Header items which might give you what you want.

  5. jasfmo
    Member
    Posted 1 year ago #

    I've already tried everything in terms of the snippet possibilities, including centering the header.It doesn´t work at all, at least as I´d like to. I regret it. Anyway thank you for the attention.

  6. MRM-Racing
    Member
    Posted 1 year ago #

    I am also a newbie :) have the same problem when shortening of the window the meny jumps down over slider and when shortening more it collapse to the right like it should.

    How can I make it stay on first place and how can I adjust the site width before it collapse?

    Thanks /Robert

  7. jasfmo
    Member
    Posted 1 year ago #

    Maybe someone who has had a similar situation, can give some help!

  8. d4z_c0nf
    Member
    Posted 1 year ago #

    Hey @jasfmo make the rule rdellconsulting pointed out became this:

    .navbar.notresp .navbar-inner {
        left: 0;
        position: relative;
        top: 150px;
    }
  9. rdellconsulting
    Member
    Posted 1 year ago #

    Fixed the Snippet thanks

  10. d4z_c0nf
    Member
    Posted 1 year ago #

    Which one ? :D
    rdellconsulting, you have done so many useful snippets :D

  11. jasfmo
    Member
    Posted 1 year ago #

    I tried everything within the list of the snippets linking to the navbar, but so far the outcome is nil.
    It appears to me that the problem is that the navbar-wrapper box size can't be extended down and thus doesn't follow the content below (150 px down) in way to include it. As matter of the fact the menu is out of the navbar wrapper.
    As my logo is vertically long and in order to have a better design look, I want to place the menu aligned with the logo's bottom and immediatelly above the slider.
    Is it clear the explanation of the problem?

  12. d4z_c0nf
    Member
    Posted 1 year ago #

    jasfmo, did you follow my tip? Nope, so I'll write again the solution.
    You have this in your custom css:

    .navbar-inner {
    position: relative;
    top: 150px;
    left: 0%;
    }

    Make it become this:

    .navbar.notresp .navbar-inner {
    position: relative;
    top: 150px;
    left: 0%;
    }

    Problem solved.

  13. jasfmo
    Member
    Posted 1 year ago #

    My apologies. I've tried but I did a mistake when I changed the code you sent in previous message reason why I insisted with the chat. Now it's ok! Problem solved.
    Thank you very much.Have a nice weekend.

  14. d4z_c0nf
    Member
    Posted 1 year ago #

    It happens.
    Have a nice weekend you too. :)

  15. rdellconsulting
    Member
    Posted 1 year ago #

    @d4z, improved the specificity in snippet

  16. d4z_c0nf
    Member
    Posted 1 year ago #

    Oh, I see. :D

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic