Header Edits

Support
#1

Hello,

This is my first time posting for support in the new forum, so I will keep my initial request simple.

I had multiple threads in the old forum for my website https://homeandhealthy.net. Unfortunately, the header is still totally skewed on various devices… This is closer to what it should look like: https://prnt.sc/g9tql7. It is especially important that the menu items be centered no matter what. The topbar phone number and button can disappear - but can that button be moved down onto the menu? I didn’t format it in the image I provided… I just put the text on the menu bar but I would like it to stay as a button.

Do you need anything else from me to provide assistance? Not sure why it’s so difficult to maintain the same functionality across devices.
Josh

#2

Hi,

To fix the menu getting out of place, you can add this in X > Launch > Options > CSS

@media (max-width: 1170px) {

.x-nav-wrap.desktop {
    display:none;
}

.masthead-inline .x-btn-navbar {
    float: right;
    display: block;
}

.x-nav-wrap.mobile {
    display:block;
}

.x-nav-wrap.mobile.collapse {
    display:none;
}

.x-nav-wrap.mobile.collapse.in {
    display:block !important;
}
}

With regards to your menu button, kindly add it in your menu then we can provide you with some css to make it a button.

Hope that helps.

#3

Paul,

Thank you for your code, but it is not working properly. Multiple staff members have suggested code over time, as this issue has been going on for a long time, and perhaps those are in conflict with each other? I previously provided my login credentials if you would like to take a look and see if something is either missing or should no longer be there. Again, not sure why it’s so difficult to achieve the same appearance across devices.

I have added the the menu item we discussed, which needs to be formatted like the button currently in the topbar of all pages other than the home page. I look forward to your reply.
Thanks!

#4

Hello There,

Thanks for updating in!

Not sure why it’s so difficult to maintain the same functionality across devices.

  • By default, your navbar (both logo and menu) has already a width of 1100 pixels. In smaller screens less than 1100 pixels, we would now have a problem since the total width is no longer enough for the screen width. What we can do to accommodate both the logo and menu is to adjust the size of the logo since it is way to wide on smaller screens.

I would recommend that you make use of this code instead:

@media(max-width: 1280px){
  .x-brand.img {
    width: 27%;
    max-width: 40%;
    margin-top: 0;
  }
}

To avoid any css conflicts, I want you to indent and manage your custom css properly. All the @media code block should be at the bottom of your css just like this:

.element {
  // some styling here
}

@media(min-width: 980px){
  .element {
     // some styling here
  }
}

@media(max-width: 767px){
  .element {
     // some styling here
  }
}

This code above will not do anything. I am only send this for example purposes.

Hope this helps. Kindly let us know.

#5

Thank you for your response. I believe you may have overlooked one of my questions, though. The “schedule a visit” link in the menu needs to be formatted like the button currently in the topbar of all pages other than the home page. I look forward to your reply.

#6

Hello, I am checking re my previous question as it has been 24 hours. In addition to that question, please note that the header is still not right on pages other than the home page. Please advise!

#7

Hello There,

Just for future topics, self responding or bumping your post pushes it back in our Queue system so it takes longer to respond to.

Do you want something like this?

Please make use of this code:


.menu-item-1063 a {
  margin-top: 20px;
  padding: 15px !important;  
  border-radius: 0.225em;
  color: #ffffff;
  border-color: #d25d2c;
  background-color: #d25d2c;
  -webkit-box-shadow: 0 0.25em 0 0 #a71000, 0 4px 9px rgba(0, 0, 0, 0.75);
          box-shadow: 0 0.25em 0 0 #a71000, 0 4px 9px rgba(0, 0, 0, 0.75);
}

menu-item-1063 a:hover {
  color: #ffffff;
  border-color: #056282;
  background-color: #056282;
  -webkit-box-shadow: 0 0.25em 0 0 #034E68, 0 4px 9px rgba(0, 0, 0, 0.75);
          box-shadow: 0 0.25em 0 0 #034E68, 0 4px 9px rgba(0, 0, 0, 0.75);
}

Hope this helps. Please let us know how it goes.

#8

Hello,

Can you provide the code to make the button:

  1. flat
  2. smaller
  3. hover color: #A71000

Additionally, can you please take another look at the header on all pages other than the home page and provide the code to fix it? You can reference a couple of my above posts inquiring about it if needed, but that question was never addressed. Thank you!

#9

Hi There,

Please replace the code provided by Rue to :

/*Menu Button*/
.menu-item-1063 a {
  margin-top: 15px;
  padding: 12px !important;
  border-radius: 0.225em;
  color: #ffffff;
  border: 2px solid #d25d2c;
  background-color: #d25d2c;
}

.menu-item-1063 a:hover {
  color: #ffffff !important;
  text-decoration: none;
  border: 2px solid white;
    background-color: #A71000;

}

.x-navbar .desktop .x-nav > li.menu-item-1063 > a:hover > span {
  box-shadow: none;
}

Hope it helps!