CODEWITHSUNDEEP
htmlcss
fresher
fresher

Reputation: 911

Display Menu & logo in center of the page

I have a logo & menu, displaying in the center of the page in the entire site as here.

enter image description here

but in only one page, it's displaying a bit to the left. I want to display that menu at the center center of the page as shown here.

enter image description here

CSS:

.ms-topmenu .ms-label {
    font-size: 15px;
    text-transform: none;
    color: #000000;
    padding: 14.75px 15px;
}

.ms-megamenu .anchor_mbmenu {
    background: rgb(7, 70, 102);
    padding: 8px 0;
    display: none;
}

.ms-megamenu .text-right {
    text-align: right;
}

Upvotes: 0

Views: 81

Answers (3)

Iqbal Pasha
Iqbal Pasha

Reputation: 1316

try to apply this below css will may solve issue.

html {
    overflow: scroll;
    overflow-x: hidden;
}
::-webkit-scrollbar {
    width: 0px;  /* remove scrollbar space */
    background: transparent;  /* optional: just make scrollbar invisible */
}
/* optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: #FF0000;
}

Upvotes: 1

Vineeta Mehta
Vineeta Mehta

Reputation: 458

The page is having a extra class 'cms-customized-mobile-cases' in the body tag which is causing a width of header to override to 1200px , which is causing the menu to shift a little left remove this class from body tag and you will get the desired menu.

Here is the class which is causing the problem:

.cms-customized-mobile-cases #header {
    margin: 0 auto;
    width: 1200px;
}

Upvotes: 1

Leo the lion
Leo the lion

Reputation: 3065

Go in your styles.css and change 

@media only screen and (min-width: 1224px)
.cms-customized-mobile-cases #header {
    margin: 0 auto;
    width: 1200px;
}

to 

@media only screen and (min-width: 1224px)
.cms-customized-mobile-cases #header {
    margin: 0 auto;
    width: 1000px;
}

and you are done.

Upvotes: 2

Related Questions